SlideShare une entreprise Scribd logo
1  sur  23
Atelier #1
HTML BASICS
Mechri Abderrahmane
<ba_mechri@esi.dz>
Samedi 05 Novembre 2016
1
Qu'est-ce que HTML?
HTML est le langage de balisage standard pour la création de pages
Web.
• HTML signifie Hyper Text Markup Language
• Les éléments HTML sont représentés par des balises
2
Balises HTML
• Les balises HTML sont des noms d'éléments entourés par des
crochets:
<Tagname> contenu va ici ... </ tagname>
• Les balises HTML sont généralement par paires comme <p> et </ p>
• La balise de fin est écrit comme la balise de début, mais avec
une barre oblique inséré avant le nom de la balise
3
Structure d’une page HTML
4
Un premier exemple:
• <!DOCTYPE html> définit ce document pour être HTML5
• <html> est l'élément racine d'une page HTML
• <head> contient des méta - informations sur le document
• <title> spécifie un titre pour le document
• <body> contient le contenu visible de la page
• <h1> définit un grand titre
• <p> définit un paragraphe
5
Navigateurs Internet
• Le but d'un navigateur Web (Chrome, IE, Firefox, Safari) est de lire les
documents HTML et les afficher.
• Le navigateur ne montre pas les balises HTML, mais les utilisent pour
déterminer comment afficher le document:
6
Balises de base
• Les Headings HTML sont définies avec le <h1> à <h6> .
• <H1> définit le titre le plus important. <H6> définit le titre le moins
important.
• Les paragraphes sont définis avec le <p> .
• Les liens sont définis avec le <a> .
• Le saut de ligne <br> .
7
HTML Formatage du texte
HTML définit également des éléments pour présenter le texte avec une
signification spéciale .
• <B> - Le texte en gras
• <Strong> - texte Important
• <I> - Le texte en italique
• <Mark> - Marqué texte
• <Small> - Petit texte
• <Del> - texte supprimé
• <Sub> - texte Subscript
• <Sup> - texte Exposant
• <code> - code source
8
HTML Listes
• Une liste non ordonnée commence par <ul> . Chaque élément de
la liste commence par <li> .
• Les éléments de la liste seront marqués avec des balles (petits cercles
noirs) par défaut.
• Une liste ordonnée commence <ol> . Chaque élément de la liste
commence par le <li> .
• Les éléments de la liste seront marqués avec des numéros par défaut:
9
Attributs HTML
• Tous les éléments HTML peuvent avoir des attributs
• Les attributs fournissent des informations supplémentaires à propos
d' un élément
• Les attributs sont toujours spécifiés dans la balise de début
• Attributs viennent généralement en paires nom / valeur
comme: name = "valeur "
• Images HTML sont définies avec le <img> tag.
• Le fichier source (src), texte alternatif (alt), la largeur et la hauteur
sont fournies sous forme d'attributs.
10
Tableau HTML
• Un tableau HTML est défini avec la <table> tag.
• Chaque ligne de la table est définie avec <tr> . Un en- tête de table
est définie avec <th> . Par défaut, les titres des tableaux sont en gras
et centré.
• Une cellule est définie avec <td> .
11
HTML Styles - CSS
• CSS signifie C ascading S tyle S HEETs.
• CSS décrit comment les éléments HTML doivent être affichés .
• CSS permet d' économiser beaucoup de travail . Il peut contrôler la
présentation de plusieurs pages Web à la fois.
• CSS peut être ajouté à des éléments HTML de 3 façons:
Inline - en utilisant l'attribut de style dans les éléments HTML.
Interne - en utilisant un élément <style> dans la section <head>.
Externe - en utilisant un fichier CSS externe.
12
Inline CSS
• Un CSS en ligne est utilisé pour appliquer un style unique à un
élément HTML.
• Un CSS en ligne utilise l'attribut de style d'un élément HTML.
• Cet exemple définit la couleur du texte de la balise <h1> pour le bleu:
13
CSS interne
• Un CSS interne est utilisé pour définir un style pour une seule page
HTML.
• Un CSS interne est défini dans la section <head> d'une page HTML,
dans un élément <style>:
14
CSS externe
• Une feuille de style externe est utilisé pour définir le style de
nombreuses pages HTML.
• Avec une feuille de style externe, vous pouvez changer l'apparence
d'un site Web entier, en changeant un seul fichier!
• Pour utiliser une feuille de style externe, ajouter un lien vers elle dans
la section <head> de la page HTML.
15
HTML Styles
• L'attribut HTML style a la suivante syntaxe :
<tagname style="propriété:valeur;">
• La propriété est une propriété CSS. La valeur est une valeur de CSS.
• La propriété background-color définit la couleur de fond d'un
élément HTML.
• La propriété couleur définit la couleur du texte d'un élément HTML.
• La propriété text-align définit l'alignement horizontal du texte pour
un élément HTML.
16
L'attribut id
• Pour définir un style spécifique pour un élément spécial, ajouter un
attribut id à l'élément:
17
HTML L'attribut de classe
• Pour définir un style pour un type spécial d'éléments, ajouter un
attribut de classe à l'élément:
18
HTML Blocks
• La balise <div> définit une division ou une section dans un document
HTML.
• La balise <div> est utilisé pour regrouper les éléments pour les
formater avec CSS.
19
La balise span
• La balise <span> ne fournit aucun changement visuel seule.
• La balise <span> fournit un moyen d’appliquer un style à une partie
d'un texte.
20
Propriétés CSS
• La propriété border définit une frontière autour d' un élément HTML:
border: 1px solid powderblue;
• La propriété padding définit un espace entre le texte et la bordure:
padding: 30px;
• La propriété margin définit une marge à l' extérieur de la frontière:
margin: 50px;
21
Propriétés CSS fond
CSS background properties:
• background-color
• background-image
• background-position
22
MERCI DE VOTRE ATTENTION
23

Contenu connexe

Tendances

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3JDerrien
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTMLYaya Im
 
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
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au webVlad Posea
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2Benoît Simard
 
E sidoc niveau avancé html
E sidoc niveau avancé htmlE sidoc niveau avancé html
E sidoc niveau avancé htmlCanopé
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTMLNeovov
 
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
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsJean Michel
 

Tendances (20)

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Html
HtmlHtml
Html
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
HTML
HTMLHTML
HTML
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
 
Outils de publication pour e-sidoc
Outils de publication pour e-sidocOutils de publication pour e-sidoc
Outils de publication pour e-sidoc
 
cours Php
cours Phpcours Php
cours Php
 
utilisabilite et accessibilite au web
utilisabilite et accessibilite au webutilisabilite et accessibilite au web
utilisabilite et accessibilite au web
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
E sidoc niveau avancé html
E sidoc niveau avancé htmlE sidoc niveau avancé html
E sidoc niveau avancé html
 
Html de base
Html de baseHtml de base
Html de base
 
HTML, CSS et Javascript
HTML, CSS et JavascriptHTML, CSS et Javascript
HTML, CSS et Javascript
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises 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
 
Css
CssCss
Css
 
XHL8
XHL8XHL8
XHL8
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 

En vedette

How to make boxed text with LaTeX
How to make boxed text with LaTeXHow to make boxed text with LaTeX
How to make boxed text with LaTeXVesa Linja-aho
 
Pour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightboxPour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightboxVoyelle Voyelle
 
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三schoowebcampus
 
Un bon PowerPoint pour sublimer votre discours et votre offre
Un bon PowerPoint pour sublimer votre discours et votre offreUn bon PowerPoint pour sublimer votre discours et votre offre
Un bon PowerPoint pour sublimer votre discours et votre offreOsonsLeDesign
 

En vedette (7)

Html frames
Html framesHtml frames
Html frames
 
Html presentation
Html presentationHtml presentation
Html presentation
 
How to make boxed text with LaTeX
How to make boxed text with LaTeXHow to make boxed text with LaTeX
How to make boxed text with LaTeX
 
Pour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightboxPour créer un bandeau de vignettes qui ouvre une lightbox
Pour créer un bandeau de vignettes qui ouvre une lightbox
 
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三
スタートアップ組織づくりの具体策を学ぶ 先生:金子 陽三
 
Un bon PowerPoint pour sublimer votre discours et votre offre
Un bon PowerPoint pour sublimer votre discours et votre offreUn bon PowerPoint pour sublimer votre discours et votre offre
Un bon PowerPoint pour sublimer votre discours et votre offre
 
THIRST
THIRSTTHIRST
THIRST
 

Similaire à HTML basics

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
 
formation developpement web seance html.pptx
formation developpement web seance html.pptxformation developpement web seance html.pptx
formation developpement web seance html.pptxIdrissaDembl
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueDanielMohamed4
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.pptAmineReal
 
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
 
Modèles de données et langages de description ouverts 2021-2022 - 2
Modèles de données et langages de description ouverts   2021-2022 - 2Modèles de données et langages de description ouverts   2021-2022 - 2
Modèles de données et langages de description ouverts 2021-2022 - 2François-Xavier Boffy
 
cours html tableau.pptx
cours html tableau.pptxcours html tableau.pptx
cours html tableau.pptxfellahi1
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
 
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
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 

Similaire à HTML basics (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
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
les balises HTML5.pdf
les balises HTML5.pdfles balises HTML5.pdf
les balises HTML5.pdf
 
formation developpement web seance html.pptx
formation developpement web seance html.pptxformation developpement web seance html.pptx
formation developpement web seance html.pptx
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
CSS
CSSCSS
CSS
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
seance3-1 CSS.ppt
seance3-1 CSS.pptseance3-1 CSS.ppt
seance3-1 CSS.ppt
 
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
 
Programmation web
Programmation webProgrammation web
Programmation web
 
Modèles de données et langages de description ouverts 2021-2022 - 2
Modèles de données et langages de description ouverts   2021-2022 - 2Modèles de données et langages de description ouverts   2021-2022 - 2
Modèles de données et langages de description ouverts 2021-2022 - 2
 
Atelier template
Atelier templateAtelier template
Atelier template
 
cours html tableau.pptx
cours html tableau.pptxcours html tableau.pptx
cours html tableau.pptx
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
CSS 3
CSS 3CSS 3
CSS 3
 
Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015Cours CSS feuilles de style en cascade- mars 2015
Cours CSS feuilles de style en cascade- mars 2015
 
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
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 

Plus de Shellmates

Cryptography basics
Cryptography basicsCryptography basics
Cryptography basicsShellmates
 
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15Shellmates
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniShellmates
 
JavaScript 1.0 by Zakaria Smahi
JavaScript 1.0 by Zakaria SmahiJavaScript 1.0 by Zakaria Smahi
JavaScript 1.0 by Zakaria SmahiShellmates
 
Introduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniIntroduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniShellmates
 
BSides Algiers - Stuxnet - Sofiane Talmat
BSides Algiers - Stuxnet - Sofiane TalmatBSides Algiers - Stuxnet - Sofiane Talmat
BSides Algiers - Stuxnet - Sofiane TalmatShellmates
 
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal Harouni
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal HarouniBSides Algiers - Linux Kernel and Recent Security Protections - Djallal Harouni
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal HarouniShellmates
 
BSides Algiers - Layer7 DoS Attacks - Oussama Elhamer
BSides Algiers - Layer7 DoS Attacks - Oussama ElhamerBSides Algiers - Layer7 DoS Attacks - Oussama Elhamer
BSides Algiers - Layer7 DoS Attacks - Oussama ElhamerShellmates
 
BSides Algiers - Reversing Win32 applications - Yacine Hebbal
BSides Algiers - Reversing Win32 applications - Yacine HebbalBSides Algiers - Reversing Win32 applications - Yacine Hebbal
BSides Algiers - Reversing Win32 applications - Yacine HebbalShellmates
 
BSides Algiers - Nmap Scripting Engine - Hani Benhabiles
BSides Algiers - Nmap Scripting Engine - Hani BenhabilesBSides Algiers - Nmap Scripting Engine - Hani Benhabiles
BSides Algiers - Nmap Scripting Engine - Hani BenhabilesShellmates
 
BSides Algiers - Normes ISO 2700x - Badis Remli
BSides Algiers - Normes ISO 2700x - Badis RemliBSides Algiers - Normes ISO 2700x - Badis Remli
BSides Algiers - Normes ISO 2700x - Badis RemliShellmates
 
BSides Algiers - Metasploit framework - Oussama Elhamer
BSides Algiers - Metasploit framework - Oussama ElhamerBSides Algiers - Metasploit framework - Oussama Elhamer
BSides Algiers - Metasploit framework - Oussama ElhamerShellmates
 
BSides Algiers - PHP Static Code Analysis - Abdeldjalil Belakhdar
BSides Algiers - PHP Static Code Analysis - Abdeldjalil BelakhdarBSides Algiers - PHP Static Code Analysis - Abdeldjalil Belakhdar
BSides Algiers - PHP Static Code Analysis - Abdeldjalil BelakhdarShellmates
 
BSides Algiers - Certification Electronique - Lilia Ounini
BSides Algiers - Certification Electronique - Lilia OuniniBSides Algiers - Certification Electronique - Lilia Ounini
BSides Algiers - Certification Electronique - Lilia OuniniShellmates
 
BSides algiers - Malware History - Sofiane Talmat
BSides algiers -  Malware History - Sofiane TalmatBSides algiers -  Malware History - Sofiane Talmat
BSides algiers - Malware History - Sofiane TalmatShellmates
 

Plus de Shellmates (15)

Cryptography basics
Cryptography basicsCryptography basics
Cryptography basics
 
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15
Malware Analysis par Mohamed Ali FATHI - BSides Algiers 2k15
 
Atelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El HassaniAtelier Python 2eme partie par Achraf Kacimi El Hassani
Atelier Python 2eme partie par Achraf Kacimi El Hassani
 
JavaScript 1.0 by Zakaria Smahi
JavaScript 1.0 by Zakaria SmahiJavaScript 1.0 by Zakaria Smahi
JavaScript 1.0 by Zakaria Smahi
 
Introduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El HassaniIntroduction à Python - Achraf Kacimi El Hassani
Introduction à Python - Achraf Kacimi El Hassani
 
BSides Algiers - Stuxnet - Sofiane Talmat
BSides Algiers - Stuxnet - Sofiane TalmatBSides Algiers - Stuxnet - Sofiane Talmat
BSides Algiers - Stuxnet - Sofiane Talmat
 
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal Harouni
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal HarouniBSides Algiers - Linux Kernel and Recent Security Protections - Djallal Harouni
BSides Algiers - Linux Kernel and Recent Security Protections - Djallal Harouni
 
BSides Algiers - Layer7 DoS Attacks - Oussama Elhamer
BSides Algiers - Layer7 DoS Attacks - Oussama ElhamerBSides Algiers - Layer7 DoS Attacks - Oussama Elhamer
BSides Algiers - Layer7 DoS Attacks - Oussama Elhamer
 
BSides Algiers - Reversing Win32 applications - Yacine Hebbal
BSides Algiers - Reversing Win32 applications - Yacine HebbalBSides Algiers - Reversing Win32 applications - Yacine Hebbal
BSides Algiers - Reversing Win32 applications - Yacine Hebbal
 
BSides Algiers - Nmap Scripting Engine - Hani Benhabiles
BSides Algiers - Nmap Scripting Engine - Hani BenhabilesBSides Algiers - Nmap Scripting Engine - Hani Benhabiles
BSides Algiers - Nmap Scripting Engine - Hani Benhabiles
 
BSides Algiers - Normes ISO 2700x - Badis Remli
BSides Algiers - Normes ISO 2700x - Badis RemliBSides Algiers - Normes ISO 2700x - Badis Remli
BSides Algiers - Normes ISO 2700x - Badis Remli
 
BSides Algiers - Metasploit framework - Oussama Elhamer
BSides Algiers - Metasploit framework - Oussama ElhamerBSides Algiers - Metasploit framework - Oussama Elhamer
BSides Algiers - Metasploit framework - Oussama Elhamer
 
BSides Algiers - PHP Static Code Analysis - Abdeldjalil Belakhdar
BSides Algiers - PHP Static Code Analysis - Abdeldjalil BelakhdarBSides Algiers - PHP Static Code Analysis - Abdeldjalil Belakhdar
BSides Algiers - PHP Static Code Analysis - Abdeldjalil Belakhdar
 
BSides Algiers - Certification Electronique - Lilia Ounini
BSides Algiers - Certification Electronique - Lilia OuniniBSides Algiers - Certification Electronique - Lilia Ounini
BSides Algiers - Certification Electronique - Lilia Ounini
 
BSides algiers - Malware History - Sofiane Talmat
BSides algiers -  Malware History - Sofiane TalmatBSides algiers -  Malware History - Sofiane Talmat
BSides algiers - Malware History - Sofiane Talmat
 

Dernier

DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxMartin M Flynn
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSKennel
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSKennel
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 37
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film françaisTxaruka
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSKennel
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 37
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Alain Marois
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Gilles Le Page
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Gabriel Gay-Para
 
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...NaimDoumissi
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSKennel
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationpapediallo3
 
Pharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmaciePharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmacieLoloshka
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSKennel
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 

Dernier (20)

DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
 
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_FormationRecherche.pdf
 
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdfSciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
SciencesPo_Aix_InnovationPédagogique_Conférence_SK.pdf
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film français
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_EtudiantActeur.pdf
 
DO PALÁCIO À ASSEMBLEIA .
DO PALÁCIO À ASSEMBLEIA                 .DO PALÁCIO À ASSEMBLEIA                 .
DO PALÁCIO À ASSEMBLEIA .
 
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdfBibdoc 2024 - Ecologie du livre et creation de badge.pdf
Bibdoc 2024 - Ecologie du livre et creation de badge.pdf
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024Zotero avancé - support de formation doctorants SHS 2024
Zotero avancé - support de formation doctorants SHS 2024
 
Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024Presentation de la plateforme Moodle - avril 2024
Presentation de la plateforme Moodle - avril 2024
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)
 
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
Potentiel du Maroc en Produits du Terroir et Stratégie Adoptée pour le dévelo...
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdfSciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
SciencesPo_Aix_InnovationPédagogique_Atelier_IA.pdf
 
Cours de Management des Systèmes d'information
Cours de Management des Systèmes d'informationCours de Management des Systèmes d'information
Cours de Management des Systèmes d'information
 
Pharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour PharmaciePharmacologie des cardiotoniques pour Pharmacie
Pharmacologie des cardiotoniques pour Pharmacie
 
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdfSciencesPo_Aix_InnovationPédagogique_Bilan.pdf
SciencesPo_Aix_InnovationPédagogique_Bilan.pdf
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 

HTML basics

  • 1. Atelier #1 HTML BASICS Mechri Abderrahmane <ba_mechri@esi.dz> Samedi 05 Novembre 2016 1
  • 2. Qu'est-ce que HTML? HTML est le langage de balisage standard pour la création de pages Web. • HTML signifie Hyper Text Markup Language • Les éléments HTML sont représentés par des balises 2
  • 3. Balises HTML • Les balises HTML sont des noms d'éléments entourés par des crochets: <Tagname> contenu va ici ... </ tagname> • Les balises HTML sont généralement par paires comme <p> et </ p> • La balise de fin est écrit comme la balise de début, mais avec une barre oblique inséré avant le nom de la balise 3
  • 5. Un premier exemple: • <!DOCTYPE html> définit ce document pour être HTML5 • <html> est l'élément racine d'une page HTML • <head> contient des méta - informations sur le document • <title> spécifie un titre pour le document • <body> contient le contenu visible de la page • <h1> définit un grand titre • <p> définit un paragraphe 5
  • 6. Navigateurs Internet • Le but d'un navigateur Web (Chrome, IE, Firefox, Safari) est de lire les documents HTML et les afficher. • Le navigateur ne montre pas les balises HTML, mais les utilisent pour déterminer comment afficher le document: 6
  • 7. Balises de base • Les Headings HTML sont définies avec le <h1> à <h6> . • <H1> définit le titre le plus important. <H6> définit le titre le moins important. • Les paragraphes sont définis avec le <p> . • Les liens sont définis avec le <a> . • Le saut de ligne <br> . 7
  • 8. HTML Formatage du texte HTML définit également des éléments pour présenter le texte avec une signification spéciale . • <B> - Le texte en gras • <Strong> - texte Important • <I> - Le texte en italique • <Mark> - Marqué texte • <Small> - Petit texte • <Del> - texte supprimé • <Sub> - texte Subscript • <Sup> - texte Exposant • <code> - code source 8
  • 9. HTML Listes • Une liste non ordonnée commence par <ul> . Chaque élément de la liste commence par <li> . • Les éléments de la liste seront marqués avec des balles (petits cercles noirs) par défaut. • Une liste ordonnée commence <ol> . Chaque élément de la liste commence par le <li> . • Les éléments de la liste seront marqués avec des numéros par défaut: 9
  • 10. Attributs HTML • Tous les éléments HTML peuvent avoir des attributs • Les attributs fournissent des informations supplémentaires à propos d' un élément • Les attributs sont toujours spécifiés dans la balise de début • Attributs viennent généralement en paires nom / valeur comme: name = "valeur " • Images HTML sont définies avec le <img> tag. • Le fichier source (src), texte alternatif (alt), la largeur et la hauteur sont fournies sous forme d'attributs. 10
  • 11. Tableau HTML • Un tableau HTML est défini avec la <table> tag. • Chaque ligne de la table est définie avec <tr> . Un en- tête de table est définie avec <th> . Par défaut, les titres des tableaux sont en gras et centré. • Une cellule est définie avec <td> . 11
  • 12. HTML Styles - CSS • CSS signifie C ascading S tyle S HEETs. • CSS décrit comment les éléments HTML doivent être affichés . • CSS permet d' économiser beaucoup de travail . Il peut contrôler la présentation de plusieurs pages Web à la fois. • CSS peut être ajouté à des éléments HTML de 3 façons: Inline - en utilisant l'attribut de style dans les éléments HTML. Interne - en utilisant un élément <style> dans la section <head>. Externe - en utilisant un fichier CSS externe. 12
  • 13. Inline CSS • Un CSS en ligne est utilisé pour appliquer un style unique à un élément HTML. • Un CSS en ligne utilise l'attribut de style d'un élément HTML. • Cet exemple définit la couleur du texte de la balise <h1> pour le bleu: 13
  • 14. CSS interne • Un CSS interne est utilisé pour définir un style pour une seule page HTML. • Un CSS interne est défini dans la section <head> d'une page HTML, dans un élément <style>: 14
  • 15. CSS externe • Une feuille de style externe est utilisé pour définir le style de nombreuses pages HTML. • Avec une feuille de style externe, vous pouvez changer l'apparence d'un site Web entier, en changeant un seul fichier! • Pour utiliser une feuille de style externe, ajouter un lien vers elle dans la section <head> de la page HTML. 15
  • 16. HTML Styles • L'attribut HTML style a la suivante syntaxe : <tagname style="propriété:valeur;"> • La propriété est une propriété CSS. La valeur est une valeur de CSS. • La propriété background-color définit la couleur de fond d'un élément HTML. • La propriété couleur définit la couleur du texte d'un élément HTML. • La propriété text-align définit l'alignement horizontal du texte pour un élément HTML. 16
  • 17. L'attribut id • Pour définir un style spécifique pour un élément spécial, ajouter un attribut id à l'élément: 17
  • 18. HTML L'attribut de classe • Pour définir un style pour un type spécial d'éléments, ajouter un attribut de classe à l'élément: 18
  • 19. HTML Blocks • La balise <div> définit une division ou une section dans un document HTML. • La balise <div> est utilisé pour regrouper les éléments pour les formater avec CSS. 19
  • 20. La balise span • La balise <span> ne fournit aucun changement visuel seule. • La balise <span> fournit un moyen d’appliquer un style à une partie d'un texte. 20
  • 21. Propriétés CSS • La propriété border définit une frontière autour d' un élément HTML: border: 1px solid powderblue; • La propriété padding définit un espace entre le texte et la bordure: padding: 30px; • La propriété margin définit une marge à l' extérieur de la frontière: margin: 50px; 21
  • 22. Propriétés CSS fond CSS background properties: • background-color • background-image • background-position 22
  • 23. MERCI DE VOTRE ATTENTION 23