HTML 5 Imen Balti Introduction Qu'est-ce que le W3C ? Le W3C ou World Wide Web Consortium, est un organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet, autour de formats ouverts garantissant une meilleure inter-opérabilité Qu'est-ce que HTML, réellement ?
HTML ou Hyper-Text Markup Language peut être
désigné comme le langage principal du Web. Le standard HTML a été développé par le W3C ou le World Wide Web Consortuim en 1997. te.En HTML, les balises sont utilisées pour définir des structures de tex Qu'est-ce que HTML, réellement ?
HTML n'est pas un langage de programmation.
C'est un langage de balises qui définit la structure de votre contenu. On parle alors de langage de balisage. Dans un langage de balisage, tout contenu, tels que les blocs de texte, les images, les tableaux,paragraphes et autres,doivent être renfermé dans un élément . HTML a vu de nombreuses mises à jour au fil du temps, et actuellement, la dernière version HTML est HTML5.
1 2 3 4 5 1995 1997 1999 2000 2014 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML 5
HTML5 HTML HTML5 supporte les SVG, et autres HTML, l’utilisation d’images vectorielles n’était formats d’image vectorielles. possible qu’avec certaines technologies comme HTML5 utilise des bases de données Web Flash, VML ou Silver-light. SQL pour le stockage temporaire (en HTML, ne pouvait utiliser que le cache du cache) des données. navigateur à cette fin. Permet un type d'apprentissage plus HTML ne permet pas au JavaScript de s’exécuter nativement dans un navigateur Web personnalisé pour les étudiants. HTML 5 fournit un support complet pour que JavaScript s’exécute en arrière-plan (grâce à l’API JS de HTML5). HTML5 prend en charge de nouveaux types de contrôles de formulaire : les dates et heures, les e-mail, les numéros, les plages (range), les téléphones, les url, les champ de recherche etc. Principaux avantages offerts par HTML5
HTML5 SE VEUT PLUS SOUPLE LORS DE LA
CONCEPTION DE SITES WEB. CERTAINES AMÉLIORATIONS MÉRITENT D’ÊTRE MENTIONNÉES:
1. Gestion des erreurs persistantes: Les algorithmes
d’analyse dans le HTML 5 sont meilleurs et leurs résultats ne sont même pas quantifiables. 2.Amélioration de la sémantique des éléments: Section, article, nav et header sont des nouveaux éléments qui ont remplacé la plupart des éléments div maintenant obsolètes,
3.Attributs de données personnalisables:
Maintenant, des données personnalisées peuvent être incluses, et il donne aux développeurs plus de chance de rendre leurs pages Web attrayantes et efficaces Ça sert a Quoi une Balise ?
Alors les balises HTML structurent le contenu du document,
en délimitant les blocs qui seront amenés à contenir des paragraphes, des titres, différents types de médias(images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes. Syntaxe: <nom_de_la_balise> texte , balise , etc </nom_de_la_balise>
Exemple de balises : <br>, <p>, <h4>, </h4>, </br>
Un élément c'est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises), et de la balise fermante correspondante. Qu'est-ce que CSS ?
CSS (CASCADING STYLE SHEETS)
PERMET DE CRÉER DES PAGES WEB À L'APPARENCE SOIGNÉE. À quoi sert CSS ? CSS est un langage de mise en forme des documents.
Les documents en question sont des fichiers texte structurés
avec un langage de balises — HTML est le plus connu de ces langages, Syntaxe de CSS
CSS est un langage basé sur des règles — on définit des règles de styles destinées à des éléments ou des groupes d'éléments particuliers dans la page. Par exemple, « Je veux que le titre principal de ma page s'affiche en rouge en gros caractères. »
Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme :
CSS 3
LA NOUVELLE IMPLÉMENTATION DE CSS
INCLUT LA POSSIBILITÉ DE PERSONNALISER LES ÉLÉMENTS DISPONIBLES DE PAGE. UN CONTRÔLE ACCRU SUR LES COULEURS, L'OBSERVATION ET LE SOUTIEN À GRADIENT (FADING) LES EFFETS ET LA CAPACITÉ À ARRONDIR LES COINS SUR LES BOÎTES SONT DEUX CHANGEMENTS IMPORTANTS POUR DE NOMBREUX DESIGNERS. Avez-vous des questions ? Envoyez-les-nous ! Nous espérons que vous avez appris quelque chose de nouveau. Les balises HTML de base Balise <html> La balise <html> est la balise de premier niveau.
Balise <head> La balise <head> représente l'entête du document.
Balise <body> C'est la plus importante parmi les balises vues précédemment. la balise <body> renferme le contenu du corps. Les paragraphes La balise <p> permet de définir un paragraphe au sein d'un code HTML. Il engendre un retour à la ligne avant et après.
Pour construire un formulaire, nous aurons besoin des éléments HTML suivants : <form>, <label>, <input>, <textarea> et <button>. La balise declaration du type !DOCTYPE Démo La déclaration DOCTYPE n'est pas une balise HTML, c'est une instruction au navigateur web sur la version du langage de balisage dont la page est écrite
En HTML5 il n'existe qu'un seul:
<!DOCTYPE html > Les balises sémantiques
Balise <footer> La balise <footer> est le pied de page. Elle doit normalement être placée en bas de celle ci ou en bas d'un bloc. Elle contient des informations en guise de conclusion. Elle peut aussi contenir des liens du bas de page.
Balise <nav> La balise <nav> renferme les liens du menu de navigation principal du site Web. On peut la placer n'importe où sur notre page, mais il est fréquent que le menu principal soit placé sur les cotés ou sur le bord de la page d'une manière assez visible pour faciliter la navigation. Balise <section> La balise <section> constitue un bloc principal qui traite le même sujet ou contient des informations de même nature. C'est généralement la partie dont le contenu change d'une page à une autre. Une section peut contenir sa propre entête (<header>) et son propre pied de page (<footer>).
Balise <aside> La balise <aside> renferme du contenu supplémentaire à un bloc. Elle peut être placée dans la balise <section> ou déclarée à part. Balise <article>
La balise <article> est destinée à accueillir des informations externes au site Web. En effet, une page ne contient pas toujours que notre propre contenu. On peut, au choix, mettre des blocs qui contiennent des données provenant d'autres site Web comme la météo, les flux RSS, les annonces ou la publicité. Le meilleur endroit pour mettre ce contenu c'est dans la balise <article>. Exercice Exemple créer votre premier tableau <table> : l'élément de tableau L'élément HTML <table> permet de représenter un tableau de données, c'est- à-dire des informations exprimées sur un tableau en deux dimensions. Démonstration
<tr> </tr> : indique le début et la fin d'une ligne du
tableau ;
<td> </td> : indique le début et la fin du contenu d'une
cellule.
En HTML, un tableau se construit ligne par ligne. Dans
chaque ligne ( <tr> ), on indique le contenu des différentes cellules ( <td> ). Excercice Créez cetableau en HML Nom Prénom Âge Niveau Intérêts
Bou Ali Ahmed 20 Bac Sport
Jebali Mariem 25 Licence Musique
Mestiri Mouna 26 Master Voyage
Gharbi Khaled 22 Licence Art
Bouzouita Souhir 21 Bac Dance
Apprenez à créer votre site web avec HTML5
<form> </form> . C'est la balise principale du formulaire,
elle permet d'en indiquer le début et la fin. Problème n° 1 : comment envoyer le texte saisi par le visiteur ? Par quel moyen ?
Problème n° 2 : une fois que les données ont été envoyées, comment les traiter ?
Souhaitez-vous recevoir le message automatiquement par mail ou préférez-vous qu'un
programme se charge de l'enregistrer quelque part, puis de l'afficher sur une page visible par tout le monde ? Pour fournir les réponses à ces deux problèmes, vous devez ajouter deux attributs à la balise <form>
method : cet attribut indique par quel moyen les données vont être envoyées, Il existe deux solutions pour envoyer des données sur le Web :
method="get"
method="post"
action : c'est l'adresse de la page ou du programme qui va traiter les informations
type="url" Votre site web * votre site web <input name="adresse" type="url" placeholder="votre site web" required class="form-control"> type="search" Recherche * Mot clé <input name="recherche" type="search" placeholder="Mot clé" required class="form-control"> type="number" Votre âge * Votre âge <input type="number" name="age" placeholder="Votre âge" required class="form-control"> Formulaire Exercice Nom Prénom Email Numéro de téléphone Adresse Login Mot de passe Envoyer <a> : l'élément d'ancre L'élément HTML <a> (pour ancre ou anchor en anglais), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <a> doit indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche entrée en se concentrant sur l'élément <a> l'activera.
Vous pouvez utiliser href="#top" ou le fragment vide
(href="#") pour créer un lien vers le haut de la page actuelle Créer un lien vers un élément de la même page
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#P1">Mission</a></li> <li><a href="#P2">Qui sommes nous?</a> </li> <li><a href="#P3">Contact</a></li> </ul> </nav> Créer un lien avec une adresse électronique Créer un lien avec les numéros de téléphone <p>You can reach Michael at:</p>
<ul> <li><a href="https://example.com">Website</a></li> <li><a href="mailto:m.bluth@example.com">Email</a></li> <li><a href="tel:+123456789">Phone</a></li> </ul> Balises sémantiques Pour mettre en œuvre le marquage s ́emantique, HTML fournit des balises d ́edi ́ees. main (contenu principal : avec diverses sous-sections de contenu) article section aside (souvent mise `a l’int ́erieur de l’ ́el ́ement main) header (en tant que enfant de body, ou de section et article) nav (barre de navigation) footer L'entête du site avec <header>
Sur un site internet, on peut observer la partie haute,
appelée ‘entête’ ou ‘header’ en anglais, que l’on retrouve sur l’ensemble des pages du site. Cette zone peut alors être définie à l’aide de la balise <header>. De manière générale, on retrouvera dans cette zone le logo, et au minimum, la navigation principale du site. main (Balise s ́emantique) Repr ́esente le contenu majoritaire du body. Un document ne peut pas avoir plus d’un seul ́el ́ement main Les menu de navigation avec <nav>
Dans la balise <header> vu précédemment, nous pouvons
ajouter une zone servant à délimiter la navigation principale du site web. Cette zone peut être définie à l’aide de la balise sémantique <nav>. Il faut tout de même savoir que la balise <nav> n’est pas forcément placée dans le header d’un site, on peut la retrouver n’importe où et à plusieurs endroits de la page comme par exemple dans le footer ou dans une barre latérale de contenu (sidebar). Créer un découpage plus précis avec <section>
Le contenu de notre site présent dans une des balises <main>
ou <article> peut être plus ou moins complexe, c’est pour cela qu’il est important de correctement structurer le contenu principal de la page en plusieurs zones. Pour cela, il existe la balise <section> permettant un découpage plus thématique que les balises <main> et <article> vues précédemment. aside (Balise s ́emantique)
Contient les composantes non directement li ́ees au contenu
principal mais pouvant fournir des informations suppl ́ementaires indirectement en relation avec ce dernier (entr ́ees de glossaire, biographie de l’auteur, liens connexes, etc).
