SlideShare una empresa de Scribd logo
1 de 32
Formation <HTML>
GROUP FACEBOOK BAC INFO 2014
MUHAMMAD ANAS BEN OTHMAN
// HTML
Introduction à HTML
// Définition
 HTML = Hypertext Markup Language
 À pour extension .html et .htm
 C’est une langage du programmation
 C’est une langage de description
 Composé d‘un ensemble des attribues
 Permet de créer des pages web
// Histoire
 Tim Beners-Lee
 1990
 World Wide Web
Consortium (W3C)
 www.w3.org
// Future
 Pages web
 Application web
 Application mobile
 Android
 iOS
 Windows Phone
// Les logiciels
Aide à gagner le temps
// Les éditeurs HTML
 Blocnote
 Notepad++, Sublime text editor
 Adobe Dreamwaver
 Microsoft
 FrontPage
 Expression Web
 WebMatrix
// Les balises
Et leur attribues
// Structure d’une page HTML
Titre de la page
Contenuedelapage
// Comment en HTML ?
// Le source code de la page
<html>
<head>
<title>Titre de la page</title>
<head>
<body>
<h1>Mon premier page HTML</h1>
</body>
</html>
 <mot> est une balise
 </mot> en ajoute un
slash pour définir la fin
du balise <mot>
 <body> c’est la balise
qui contient le
contenue de la page
 <title> c’est la balise
qui contient le titre de
la page
// html, head et body
 <html> définir le type de document qui est
« Page web »
 <head> contient le titre de la page
 <body> contient les balises qui décrit de la page
// Les balises
<p>…</p>
Balise
d’ouverture
Balise
de fermeture
// Les attribues
<html lang="fr">
attribue valeur
// Les éléments
Qui décrit le contenue de votre votre page
// Titres
 Pour inséré un titre on
utilise la balise <hn>
 On remplace n par le
niveau du titre
 Les niveaux sont 6
// Code
// Les paragraphes
 On utilise la balise <p>
 Le contenue est écrit
entre <p> et </p>
// Mise en forme
 On utilise <b> pour
inséré un texte en gras
 <u> pour un texte
souligné
 <i> pour un texte
italique
 <br> pour retourner à
la ligne
Mise en forme 2
 L’attriue « color » décrit
le couleur du texte
 L’attribue « size » décrit
la taille du texte
 Il y a 7 tailles entre 1 et
7
// Liste ordonnée
 <ol> signifie que la
liste à insérer doit être
ordonnée
 <li> est un élément de
la liste
 Utilisant l’attribue
« type » on peut
changer l’ordre par
alphabet, numérique
ou nombres Romans
// Liste non ordonnée
 <ul> est la liste non
oronnée
 <li> est un élément de
la liste
 Utilisant l’attribue
« type » on peut
changer le cercle par
carreau ou cercle vide
// Le reste d’éléments
// To be continued
// HTML 5
Une révolution du web avec CSS 3 et JavaScript
// Site web modern
// Applications mobile
// Développement web
Seulement HTML ne suffit pas de construire un site web
dynamique
// Programmation web
 ASP.NET
 PHP
 Ruby
 Python
 Java
 Et autres …
// Bases de données
 Microsoft SQL Server
 MySQL
 Oracle
 Et autres …
// Web Framework
 jQuery
 NodeJS
 Zend Framework
 .NET Framework
// Résumé
 Introduction HTML, définition, histoire et future
 Les logiciels
 Les balises, les attribues
 Les éléments
 Texte
 Listes
 Image
 Tableau
 Liens hypertexte
 Formulaires
 HTML 5, CSS 3 et JavaScript
 ASP.NET, PHP, Ruby, Java …
Fin
Insh’allah admis !
Contact 50 946 492 / medanasbo@live.com/ www.mabo.tn

Más contenido relacionado

La actualidad más candente

Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScriptAbdoulaye Dieng
 
Cours complet Base de donne Bac
Cours complet Base de donne Bac Cours complet Base de donne Bac
Cours complet Base de donne Bac Amri Ossama
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux javaInes Ouaz
 
Résumé javascript bac info
Résumé javascript bac infoRésumé javascript bac info
Résumé javascript bac infoborhen boukthir
 
Bac blanc base de données
Bac blanc base de donnéesBac blanc base de données
Bac blanc base de donnéeslycee
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancépierrepo
 
Cours java avance débutant facile l'essentiel swing ,events
Cours java avance débutant facile l'essentiel swing ,events Cours java avance débutant facile l'essentiel swing ,events
Cours java avance débutant facile l'essentiel swing ,events Houssem Hamrouni
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPKristen Le Liboux
 
Résumé Algorithme et Programmation
Résumé Algorithme et ProgrammationRésumé Algorithme et Programmation
Résumé Algorithme et Programmationborhen boukthir
 
PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisIan Macali
 
Base de donnees Avancees et Intro à NoSQL.ppt
Base de donnees Avancees et Intro à  NoSQL.pptBase de donnees Avancees et Intro à  NoSQL.ppt
Base de donnees Avancees et Intro à NoSQL.pptIdriss22
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Abel LIFAEFI MBULA
 

La actualidad más candente (20)

Introduction à JavaScript
Introduction à JavaScriptIntroduction à JavaScript
Introduction à JavaScript
 
Cours complet Base de donne Bac
Cours complet Base de donne Bac Cours complet Base de donne Bac
Cours complet Base de donne Bac
 
Cours javascript v1
Cours javascript v1Cours javascript v1
Cours javascript v1
 
Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Fondamentaux java
Fondamentaux javaFondamentaux java
Fondamentaux java
 
Résumé javascript bac info
Résumé javascript bac infoRésumé javascript bac info
Résumé javascript bac info
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Bac blanc base de données
Bac blanc base de donnéesBac blanc base de données
Bac blanc base de données
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancé
 
Cours java avance débutant facile l'essentiel swing ,events
Cours java avance débutant facile l'essentiel swing ,events Cours java avance débutant facile l'essentiel swing ,events
Cours java avance débutant facile l'essentiel swing ,events
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Résumé Algorithme et Programmation
Résumé Algorithme et ProgrammationRésumé Algorithme et Programmation
Résumé Algorithme et Programmation
 
PHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with thisPHP Powerpoint -- Teach PHP with this
PHP Powerpoint -- Teach PHP with this
 
Formation python 3
Formation python 3Formation python 3
Formation python 3
 
Base de donnees Avancees et Intro à NoSQL.ppt
Base de donnees Avancees et Intro à  NoSQL.pptBase de donnees Avancees et Intro à  NoSQL.ppt
Base de donnees Avancees et Intro à NoSQL.ppt
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 

Destacado

Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18Wael Ismail
 
engagement réciproque
engagement réciproqueengagement réciproque
engagement réciproqueLucille Parry
 
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et Exemple
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et ExempleCONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et Exemple
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et ExempleGlobal Negotiator
 
Séries de-révision-4-eco
Séries de-révision-4-ecoSéries de-révision-4-eco
Séries de-révision-4-ecoLassaad Saidi
 
Exemple contrat de partenariat
Exemple contrat de partenariatExemple contrat de partenariat
Exemple contrat de partenariatJamaity
 
Le marché de la bijouterie en France en 2014
Le marché de la bijouterie en France en 2014Le marché de la bijouterie en France en 2014
Le marché de la bijouterie en France en 2014Digitaluxe
 
MESSIKA : stratégie de distribution (e-shop)
MESSIKA : stratégie de distribution (e-shop)MESSIKA : stratégie de distribution (e-shop)
MESSIKA : stratégie de distribution (e-shop)Blandine Darrieutort
 
Formation C# - Cours 2 - Programmation procédurale
Formation C# - Cours 2 - Programmation procéduraleFormation C# - Cours 2 - Programmation procédurale
Formation C# - Cours 2 - Programmation procéduralekemenaran
 
Le marché des Bijoux fantaisie: focus sur les Charms
Le marché des Bijoux fantaisie: focus sur les Charms Le marché des Bijoux fantaisie: focus sur les Charms
Le marché des Bijoux fantaisie: focus sur les Charms sosoguesh
 
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...ATPENSC-Group
 
Bac info 2000-2015 (Tunisie)
Bac info 2000-2015 (Tunisie)Bac info 2000-2015 (Tunisie)
Bac info 2000-2015 (Tunisie)salah fenni
 
Ch5 base de données
Ch5   base de donnéesCh5   base de données
Ch5 base de donnéesWael Ismail
 
Introduction à html
Introduction à htmlIntroduction à html
Introduction à htmltesteur_fou
 

Destacado (16)

HTML
HTMLHTML
HTML
 
Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18Base de-donn-es-bac-si-95ae18
Base de-donn-es-bac-si-95ae18
 
bac info : série récursivité
bac info : série récursivitébac info : série récursivité
bac info : série récursivité
 
engagement réciproque
engagement réciproqueengagement réciproque
engagement réciproque
 
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et Exemple
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et ExempleCONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et Exemple
CONTRAT DE JOINT VENTURE INTERNACIONALE - Modèle de Contrat et Exemple
 
Séries de-révision-4-eco
Séries de-révision-4-ecoSéries de-révision-4-eco
Séries de-révision-4-eco
 
Exemple contrat de partenariat
Exemple contrat de partenariatExemple contrat de partenariat
Exemple contrat de partenariat
 
Le marché de la bijouterie en France en 2014
Le marché de la bijouterie en France en 2014Le marché de la bijouterie en France en 2014
Le marché de la bijouterie en France en 2014
 
MESSIKA : stratégie de distribution (e-shop)
MESSIKA : stratégie de distribution (e-shop)MESSIKA : stratégie de distribution (e-shop)
MESSIKA : stratégie de distribution (e-shop)
 
Formation C# - Cours 2 - Programmation procédurale
Formation C# - Cours 2 - Programmation procéduraleFormation C# - Cours 2 - Programmation procédurale
Formation C# - Cours 2 - Programmation procédurale
 
Le marché des Bijoux fantaisie: focus sur les Charms
Le marché des Bijoux fantaisie: focus sur les Charms Le marché des Bijoux fantaisie: focus sur les Charms
Le marché des Bijoux fantaisie: focus sur les Charms
 
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...
Fiche de TP 3 sur les bases de données avec les SGBD(Système de Gestion des B...
 
Bac info 2000-2015 (Tunisie)
Bac info 2000-2015 (Tunisie)Bac info 2000-2015 (Tunisie)
Bac info 2000-2015 (Tunisie)
 
Mes devoirs 4 si
Mes devoirs 4 siMes devoirs 4 si
Mes devoirs 4 si
 
Ch5 base de données
Ch5   base de donnéesCh5   base de données
Ch5 base de données
 
Introduction à html
Introduction à htmlIntroduction à html
Introduction à html
 

Similar a Formation HTML pour Bac Informatique

Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxMounir Gouiouez
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocpriscilla_mommessin
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoccdi-0450786k
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidocStéphanie Tricard
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTMLBruno Delb
 
Reseau et multimedia2009
Reseau et multimedia2009Reseau et multimedia2009
Reseau et multimedia2009jihen damerji
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfYassineZARIOUH
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxBrahimKarimi
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie
 

Similar a Formation HTML pour Bac Informatique (20)

Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
amphi_html.ppt
amphi_html.pptamphi_html.ppt
amphi_html.ppt
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidoc
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
 
Reseau et multimedia2009
Reseau et multimedia2009Reseau et multimedia2009
Reseau et multimedia2009
 
Chapitre1
Chapitre1 Chapitre1
Chapitre1
 
Cours html5
Cours html5Cours html5
Cours html5
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Html
HtmlHtml
Html
 
Formation web
Formation webFormation web
Formation web
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Formulaires
FormulairesFormulaires
Formulaires
 
Html de base
Html de baseHtml de base
Html de base
 
Netpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutesNetpathie apprendre-le-html-en-15-minutes
Netpathie apprendre-le-html-en-15-minutes
 

Formation HTML pour Bac Informatique

  • 1. Formation <HTML> GROUP FACEBOOK BAC INFO 2014 MUHAMMAD ANAS BEN OTHMAN
  • 3. // Définition  HTML = Hypertext Markup Language  À pour extension .html et .htm  C’est une langage du programmation  C’est une langage de description  Composé d‘un ensemble des attribues  Permet de créer des pages web
  • 4. // Histoire  Tim Beners-Lee  1990  World Wide Web Consortium (W3C)  www.w3.org
  • 5. // Future  Pages web  Application web  Application mobile  Android  iOS  Windows Phone
  • 6. // Les logiciels Aide à gagner le temps
  • 7. // Les éditeurs HTML  Blocnote  Notepad++, Sublime text editor  Adobe Dreamwaver  Microsoft  FrontPage  Expression Web  WebMatrix
  • 8. // Les balises Et leur attribues
  • 9. // Structure d’une page HTML Titre de la page Contenuedelapage
  • 10. // Comment en HTML ?
  • 11. // Le source code de la page <html> <head> <title>Titre de la page</title> <head> <body> <h1>Mon premier page HTML</h1> </body> </html>  <mot> est une balise  </mot> en ajoute un slash pour définir la fin du balise <mot>  <body> c’est la balise qui contient le contenue de la page  <title> c’est la balise qui contient le titre de la page
  • 12. // html, head et body  <html> définir le type de document qui est « Page web »  <head> contient le titre de la page  <body> contient les balises qui décrit de la page
  • 14. // Les attribues <html lang="fr"> attribue valeur
  • 15. // Les éléments Qui décrit le contenue de votre votre page
  • 16. // Titres  Pour inséré un titre on utilise la balise <hn>  On remplace n par le niveau du titre  Les niveaux sont 6
  • 18. // Les paragraphes  On utilise la balise <p>  Le contenue est écrit entre <p> et </p>
  • 19. // Mise en forme  On utilise <b> pour inséré un texte en gras  <u> pour un texte souligné  <i> pour un texte italique  <br> pour retourner à la ligne
  • 20. Mise en forme 2  L’attriue « color » décrit le couleur du texte  L’attribue « size » décrit la taille du texte  Il y a 7 tailles entre 1 et 7
  • 21. // Liste ordonnée  <ol> signifie que la liste à insérer doit être ordonnée  <li> est un élément de la liste  Utilisant l’attribue « type » on peut changer l’ordre par alphabet, numérique ou nombres Romans
  • 22. // Liste non ordonnée  <ul> est la liste non oronnée  <li> est un élément de la liste  Utilisant l’attribue « type » on peut changer le cercle par carreau ou cercle vide
  • 23. // Le reste d’éléments // To be continued
  • 24. // HTML 5 Une révolution du web avec CSS 3 et JavaScript
  • 25. // Site web modern
  • 27. // Développement web Seulement HTML ne suffit pas de construire un site web dynamique
  • 28. // Programmation web  ASP.NET  PHP  Ruby  Python  Java  Et autres …
  • 29. // Bases de données  Microsoft SQL Server  MySQL  Oracle  Et autres …
  • 30. // Web Framework  jQuery  NodeJS  Zend Framework  .NET Framework
  • 31. // Résumé  Introduction HTML, définition, histoire et future  Les logiciels  Les balises, les attribues  Les éléments  Texte  Listes  Image  Tableau  Liens hypertexte  Formulaires  HTML 5, CSS 3 et JavaScript  ASP.NET, PHP, Ruby, Java …
  • 32. Fin Insh’allah admis ! Contact 50 946 492 / medanasbo@live.com/ www.mabo.tn