Téléchargé 11 fois
Téléchargé parShellmates
HTML basics
Ce document présente les bases du HTML, y compris les balises, la structure d'une page, et les éléments de formatage comme les titres, paragraphes et listes. Il aborde également l'utilisation de CSS pour le style des pages web et la manière d'appliquer des styles inline, internes ou externes. Enfin, le document explique les attributs HTML et crée des sections à l'aide de balises <div> et <span>.
Contenu connexe
HTML basics
- 1. Atelier #1 HTML BASICS MechriAbderrahmane <ba_mechri@esi.dz> Samedi 05 Novembre 2016 1
- 2. Qu'est-ce que HTML? HTMLest 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 • Lesbalises 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
- 4. Structure d’une pageHTML 4
- 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 • Lebut 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 dutexte 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 • Uneliste 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 • Tousles é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 • Untableau 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 • UnCSS 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 • UnCSS 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 • Unefeuille 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'attributHTML 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 • Pourdéfinir un style spécifique pour un élément spécial, ajouter un attribut id à l'élément: 17
- 18. HTML L'attribut declasse • 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 • Labalise <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 • Laproprié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 CSSbackground properties: • background-color • background-image • background-position 22
- 23. MERCI DE VOTREATTENTION 23