HTML basics

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

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

HTML basics

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à HTML basics

Similaire à HTML basics (20)

Plus de Shellmates

Plus de Shellmates (15)

Dernier

Dernier (20)

HTML basics