html basics

23
Atelier #1 HTML BASICS Mechri Abderrahmane <[email protected]> Samedi 05 Novembre 2016 1

Upload: shellmates

Post on 20-Feb-2017

59 views

Category:

Education


0 download

TRANSCRIPT

Page 1: HTML basics

1

Atelier #1HTML BASICS

Mechri Abderrahmane

<[email protected]>

Samedi 05 Novembre 2016

Page 2: HTML basics

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

Page 3: HTML basics

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

Page 4: HTML basics

4

Structure d’une page HTML

Page 5: HTML basics

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

Page 6: HTML basics

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:

Page 7: HTML basics

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> .

Page 8: HTML basics

8

HTML Formatage du texteHTML 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

Page 9: HTML basics

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:

Page 10: HTML basics

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.

Page 11: HTML basics

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> .

Page 12: HTML basics

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.

Page 13: HTML basics

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:

Page 14: HTML basics

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>:

Page 15: HTML basics

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.

Page 16: HTML basics

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.

Page 17: HTML basics

17

L'attribut id• Pour définir un style spécifique pour un élément spécial, ajouter un

attribut id à l'élément:

Page 18: HTML basics

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:

Page 19: HTML basics

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.

Page 20: HTML basics

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.

Page 21: HTML basics

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;

Page 22: HTML basics

22

Propriétés CSS fondCSS background properties:• background-color• background-image• background-position

Page 23: HTML basics

23

MERCI DE VOTRE ATTENTION