html basics
Post on 20-Feb-2017
59 Views
Preview:
TRANSCRIPT
1
Atelier #1HTML BASICS
Mechri Abderrahmane
<ba_mechri@esi.dz>
Samedi 05 Novembre 2016
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
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
4
Structure d’une page HTML
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
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:
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> .
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
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:
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.
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> .
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.
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:
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>:
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.
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.
17
L'attribut id• Pour définir un style spécifique pour un élément spécial, ajouter un
attribut id à l'élément:
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:
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.
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.
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;
22
Propriétés CSS fondCSS background properties:• background-color• background-image• background-position
23
MERCI DE VOTRE ATTENTION
top related