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
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfmdallamohamed
 
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
 

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
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
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
 

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

Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseTxaruka
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024IEN_Jonzac
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfDafWafia
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptxTxaruka
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationLeBaobabBleu1
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"ArchivesdeLyon
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbainesSocratis Vasiopoulos
 
Exemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste AuditExemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste Audittechwinconsulting
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxAbderrahim GHASSOUB
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxAbderrahim GHASSOUB
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesLeBaobabBleu1
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en FranceTxaruka
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfOssamaLachheb
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptxTxaruka
 

Dernier (14)

Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Exemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste AuditExemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste Audit
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 

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