Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Module : Techniques de l'information et de la communication TIC Université des

Module : Techniques de l'information et de la communication TIC Université des sciences et de la technologie Houari Boumediene Faculté d’Electronique et d’Informatique Enseignante : Mme BESSAAD Wissam Bessaad.wissam@gmail.com 1ere année MI 2 eme Semestre 2021 1 Cours 04 Université des sciences et de la technologie Houari Boumediene Faculté d’Electronique et d’Informatique Enseignante : Mme BESSAAD Wissam Bessaad.wissam@gmail.com Module TIC 1ere année MI 2 eme Semestre 2021 2 Plan du cours • Définitions • Structure d’un document HTML • En-tête des documents HTML • Corps des documents HTML • Présentation du texte en HTML • Liens hypertextes • Insérer une image en HTML • Les tableaux en HTML • Exemple du code HTML 3 Définitions 4 Le développement Web désigne de manière générale les tâches associées au développement de sites Web destinés à être hébergés via un intranet ou Internet. Le processus de développement web comprend, entre autres, la conception de sites web, le développement de contenu web, l’élaboration de scripts côté client ou côté serveur et la configuration de la sécurité. Le développement Web est le codage ou la programmation qui permet de faire fonctionner un site Web, il va de la création de pages en texte brut à des applications Web complexes, des applications de réseaux sociaux et des applications commerciales électroniques. Le développement web c’est quoi ? 5 Les trois principaux types de développeurs sont front-end, back-end et full-stack. Un développeur front-end est responsable de la programmation côté client, il prend en charge la conception du site Web l’écriture du code nécessaire pour l’implémenter sur le Web; Il se doit de maîtriser au moins trois langages de programmation (HTML, CSS et JavaScript); Ainsi que la performance du site web et sa compatibilité avec les différents navigateurs et format d’affichage (mobile, desktop) autrement dit « responsive design » • Un développeur back-end est responsable de la programmation côté serveur, il doit créer le code et les programmes qui alimentent le serveur du site web, les bases de données et toutes les applications que contient le site Web. Les 03 types du développement web 6 Il utilise un large éventail de langages différents côté serveur afin de construire des programmes compliqués; Parmi les langages les plus utilisés PHP, Python, Java et Ruby, tandis que le SQL pour gérer et analyser les données dans les bases de données des sites web. La vitesse d’un site web étant une considération majeure lorsqu’il s’agit d’optimisation pour les moteurs de recherche, elle est un facteur important lors du développement du back-end. • Un développeur full-stack fait un peu de tout . Les termes « front-end » et « back-end » sont utilisés dans le métier de programmeurs pour décrire les couches d’un site web. Les 03 types du développement web (Suite) 7 Il existe plusieurs langages et outils utilisés pour le développement des sites et des applications Web, exemples : HTML, CSS, Java Script, PHP, MySQL, etc… • HTML : Le HTML (HyperText Markup Language) est un langage qui permet de décrire et structurer des informations (textes, images, médias…) dans le but de les faire afficher dans un navigateur. • CSS : Le langage CSS (Cascading Style Sheets : Feuilles de Style en Cascade) a pour but de séparer totalement la présentation d'une page Web de son contenu (du langage HTML). • Java Script : Ce langage est un langage de programmation qui permet d’apporter des améliorations au langage HTML en permettant d’exécuter des commandes du coté client (au niveau du navigateur). Langages pour la création d’un site Web 8 • PHP : Le langage PHP (historiquement Personal Home Page, officiellement : HyperText Preprocessor) est un langage de script coté serveur qui a été conçu spécifiquement pour le web; Ce langage est utilisé pour créer des pages Web dynamiques, le code PHP est inclus dans une page HTML et sera exécuté à chaque fois qu’un visiteur affichera la page. • MySQL : MySQL est un système de gestion de bases de données. Le serveur MySQL contrôle l’accès aux données pour s’assurer que plusieurs utilisateurs peuvent se servir simultanément d’une même base de données et pour garantir que seuls les utilisateurs autorisés peuvent accéder aux données. Langages pour la création d’un site Web (suite) 9 Page web statique vs Page web dynamique Page Web statique Page Web dynamique Présentation Une pages Web statiques offre le même contenu pour tous les visiteurs. Une page Web dynamique est comportementale et a la capacité de produire un contenu distinct pour différents visiteurs. Base de données N’utilise pas de bases de données Utilise une base de données Temps de chargement de la page Demande moins de temps Demande plus de temps Changement d’information Se produit rarement Fréquemment Complexité Simple à concevoir. Compliquée à construire. 10 Structure d’un document HTML 11 12 Structure d’un document HTML Un document HTML contient : du texte, et des balises (ou tags) Exemple : <h1> Ceci est un titre </h1> Ce document commence par la balise <HTML> et finit par la balise </HTML> Il contient également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la page: • En-tête est délimité par les balises <HEAD> et </HEAD>. • Corps est délimité par les balises <BODY> et </BODY>. • Balise de début de zone <... > (ex. : <HTML>) • Balise de fin de zone </... > (ex. : </HTML>) 13 En-tête des documents HTML 14 En-tête des documents HTML L’en-tête d’un document HTML résume les informations générales de la page, il contient : • Titre du document : apparaît dans la barre supérieure du navigateur : <TITLE>un titre</TITLE> • Propriété du document: non affichée, plusieurs propriétés peuvent être définies. Pas de contrainte ni d'obligation sur les propriétés définies. <META NAME="propriété" CONTENT="valeur"> On peut aussi rajouter des commentaires ils peuvent s'étendre sur plusieurs lignes et bien sûr, figurer également au milieu d'une page HTML :  15 En-tête des documents HTML (Suite) <HEAD> <TITLE> Bienvenue sur cette page web </TITLE> <META NAME="auteur" CONTENT=" BESSAAD Wissam"> <META NAME="contenu" CONTENT="Cours HTML"> </HEAD> En tête document HTML 16 Corps des documents HTML 17 Corps des documents HTML Tout le contenu de la page Web, du moins son apparence, se situe dans le corps, c’est la partie principale d’une page web, elle contient tout ce qui est visible dans le navigateur, avec notamment du texte, des images, des liens hypertextes, des titres en grosses lettres, etc… <body> <h1>Module TIC</h1> …….. …….. <p>Cours HTML.</p> </body> 18 Présentation du texte en HTML 19 Présentation du texte en HTML <H1>Titre</H1> <H2> <H3> <H4> <H5> <H6> Attribut possible ALIGN=« left|center|right>… <P>... </P> paragraphe <BR> passage à la ligne <HR> trait horizontal <B>... </B> gras <I>... </I> italique Ci-après quelques exemples : titre, paragraphe, passage à la ligne, trait horizontal, gras et italique. 20 Liens hypertextes 21 Un lien est une portion de texte permettant d'atteindre un document désigné par une URL : <A HREF="URL">texte du lien</A> - URL absolue <A HREF=" https://www.usthb.com "> USTHB </A> - URL relative <A HREF="sommaire.html"> sommaire </A> Liens hypertextes 22 Insérer une image en HTML 23 Le code suivant présente le format utilisé par le HTML pour insérer une image : <img src="nom de l’image" height="hauteur" width="largeur" > Exemple: Insérer une image en HTML <img src="img_world.jpg" width="500" height="600"> 24 Les tableaux en HTML 25 Les tableaux sont présentés par les balises suivantes : • La balise englobant le code de description du tableau est <TABLE >..</TABLE> • Le marqueur TR (=Table Row) défini la ligne du tableau. • Le marqueur TD (=Table Data) entoure un élément de tableau. • Le marqueur TH (=Table Header) est un élément de titre. • La CAPTION permet de faire précéder le tableau d'un titre. Les tableaux en HTML 26 <table> <CAPTION>Titre du tableau</CAPTION> <tr> <th>Mois</th> <!–1er colonne--> <th>Gain</th> <!– 2eme colonne--> </tr> Les tableaux en HTML (Suite) <tr> <!—1er Ligne--> <td>Juin</td> <td>10000 DA</td> </tr> <tr><!—2eme Ligne--> <td>Juillet</td> <td>80000 DA</td> </tr> </table> 27 Exemple du code HTML 28 Exemple du code HTML Un exemple d’un code HTML avec le résultat sur le navigateur selon les critères suivants : Un dossier nommé « web» contient : -deux documents HTML : www.html et gallerie.html -deux images. L’outils utilisé est Notepad++, un navigateur web pour l’affichage. 29 Exemple du code HTML (suite) 30 Exemple du code HTML (suite) 31 Questions !? 32 uploads/Science et Technologie/ cours-04-module-tic.pdf