Le Développement Web :
Le développement web consiste à utiliser déférents langages (HTML5/CSS3, JavaScript, PHP…) pour écrire des programmes qui sont ensuite exécutés par les navigateurs web. Les instructions quant à elles sont exécutées du coté serveur. Dans cette première partie, on va commencer par voir les bases du langage HTML5.Introduction :
HTML5 (HyperText Markup Language 5) est la dernière révision majeure du HTML (format de données conçu pour représenter les pages web). Cette version a été finalisée le 28 octobre 2014. Il utilise un système de balisage composé d'éléments représentant un contenu spécifique.Le balisage signifie qu'avec HTML 5, vous déclarez ce qui est présenté à un internaute, et non pas comment il est présenté. Pour les représentations visuelles, elle sont définies par des feuilles de style en cascade (CSS) et réalisées par les navigateurs. Les éléments encore existants qui permettent de tels chose, comme par exemple. font, "sont entièrement obsolètes et ne doivent pas être utilisés par le développeur.
HTML est parfois appelé un langage de programmation, mais il n’a pas de logique, il est plutôt un langage de balisage. Les balises (ou tag en anglais) doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document .
les outils nécessaires :
Un éditeur de text , j'utilise Bracket pour ma part :- Notebad++, Bracket, Sublime text ...
Un navigateur internet, je vous consel Chrome et Firefox:
- Firefox, Chrome,Safari, Opéra,Edge ...
Balise et Éléments :
Un élément est constitué généralement comme suit :une balise d'ouverture (<nom_élément>)
une balise de fermeture (</ nom_élément>)
le contenu entre: <nom_élément> ... contenu ... </ nom_élément>
Exemple d'un paragraphe: <p> Hellow word !! </p>
Certains éléments HTML ne possèdent pas de balise de fermeture ni de contenu. Celles-ci sont appelées éléments vides.
Exemple :
<img src="image.png" alt="Spécifie un texte alternatif pour une image">
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
Les noms d'éléments peuvent être considérés comme des mots-clés descriptifs du contenu qu'ils contiennent, tels que video, audio, table, footer.
Une page HTML peut comporter potentiellement des centaines d’éléments qui sont ensuite lus par un navigateur Web, interprétés et rendus sous forme de contenu lisible ou audible à l’écran de l'utilisateur.
Il est important de noter la différence entre les éléments et les balises:
Éléments : img, audio, table
balises : <img>, <audio>, <table>, </ html>, </ body>
Décomposons une balise.
<p> contenu </p> : représente un paragraphe commun.
Les éléments ont généralement deux balise une d'ouverture et une de fermeture. La balise d’ouverture contient le nom de l’élément entre crochets <p>. La balise de fermeture est la même que pour l'ouverture, avec un Slash entre le crochet d’ouverture et le nom de l’élément </ p>.
Le contenu viens ce placer entre ces deux balises: <p> Ceci est un paragraphe. </ P>.
Créant une page simple pour débuté :
L'exemple suivant crée une simple page Web "Hello World". Les fichiers HTML peuvent être créés en utilisant n'importe quel éditeur de texte, pour ma part j’utilise Notepad++, on les enregistre avec une extension .html (Hellow.html).<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page web</title>
</head>
<body>
<h1>Hello World! </h1>
<p>Ceci est un paragraphe.</p>
</body>
</html>
Et voilà le résultat !!
 |
| Hello Word! |
Détails sur les balises utilisées dans l'exemple :
<! DOCTYPE> : Définit la version HTML utilisée dans le document. Dans ce cas, c'est HTML5. On va en parler plus tard dans la partie suivante.<html> : est la balise d'ouverture de la page. Aucune autre balise ne doit venir après qu'on la fermé avec </ html>.
L'attribut lang="fr" de la balise déclare la langue principale de la page en utilisant les codes de langue ISO (fr pour le français).
<head> : Cette section n'apparaît pas dans la fenêtre principale du navigateur, mais contient principalement des informations sur le document HTML, appelées métadonnées. Il peut également contenir des importations à partir de feuilles de style et de scripts externes.
<meta> : Donne au navigateur des métadonnées sur le document. L'attribut charset par exemple déclare le codage de caractères.
Les méta-éléments sont généralement utilisés pour spécifier la description de la page, les mots-clés, l'auteur du document, la dernière modification et d'autres métadonnées.
Les métadonnées peuvent être utilisées par les navigateurs (comment afficher du contenu ou recharger une page), des moteurs de recherche (mots-clés) ou d’autres services Web.
<title> : cette balise est requise dans tous les documents HTML et définit le titre du document. Elle définit un titre dans la barre d'outils du navigateur, fournit un titre pour la page lorsqu'elle est ajoutée aux favoris et affiche un titre pour la page dans les résultats des moteurs de recherche.
<body> : définit le corps du document, la partie affichée aux utilisateurs.c'est-à-dire tout le contenu d'un document HTML, tel que du texte, des hyperliens, des images, des tableaux, des listes, etc.
Aucun autre contenu ne doit venir après la balise de fermeture </body>
<h1> : définit le titre le plus importante (de niveau 1), pour la page.<h6> définit le moins important .
<p> : Représente un paragraphe de texte. Les navigateurs ajoutent automatiquement un espace (marge) avant et après chaque élément <p>. Les marges peuvent être modifiées avec CSS (avec les propriétés des marges on va voir tous ca dans le cours CSS qui viendra bientôt ).
Aucun commentaire:
Enregistrer un commentaire