Programmation Web - Dev_web_toufik PDF

Programmation Web Prof. Toufik Mzili Introduction HTML Plan CSS JavaScript Plan du cours 1 HTML 2 CSS 3...

Programmation Web Prof. Toufik Mzili Introduction HTML Plan CSS JavaScript Plan du cours 1 HTML 2 CSS 3 JavaScript 4 1 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction HTML HTML (Hyper Text Markup Language) est d’un langage de description (et non pas d’un langage de programmation) qui va nous permettre de décrire l’aspect d’un document, d’y inclure des informations variées (textes, images, sons, animations etc.) et d’établir des relations cohérentes entre ces informations grâce aux liens hypertextes EMSI 2AP HONORIS F. AIT BENNACER 2 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction HTML HTML est l’abréviation de HyperText Markup Language, soit en français « langage hypertexte de balisage ». Ce langage a été créé en 1991 et a pour fonction de structurer et de donner du sens à du contenu. Ils nous permet de créer des sites web. EMSI 2AP HONORIS F. AIT BENNACER 3 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction HTML Versions de l’HTML: HTML 1 (1991) : Créé par Tim Berners-Lee. HTML 2 (1994) : Les règles et le fonctionnement de cette version sont donnés par le W3C. Elle définit les bases des versions suivantes du HTML. HTML 3 (1996) : Rajoute de nombreuses possibilités au langage comme les tableaux, les scripts, le positionnement du texte autour des images, etc. EMSI 2AP HONORIS F. AIT BENNACER 4 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction HTML Versions de l’HTML: HTML 4 (1998) : Elle propose l'utilisation de frames, des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style (CSS ). HTML 5 (2014) : Dernière version d'HTML, elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. EMSI 2AP HONORIS F. AIT BENNACER 5 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Avantages HTML Les avantages du langage HTML sont nombreux Peux coûteux en effet un simple éditeur de texte suffit à écrire ses premiers documents HTML Relativement facile à aborder, Il représente en outre un bon moyen de dépasser les problèmes de compatibilité entre des systèmes et des formats informatiques différents EMSI 2AP HONORIS F. AIT BENNACER 6 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises L’Hypertexte Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes, qui relient votre document à d'autres documents. En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on peut accéder a un nouveau document situé sur un autre ordinateur en n'importe quel point du globe. EMSI 2AP HONORIS F. AIT BENNACER 7 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Outils de développement web Vous aurez besoin d’un Éditeur de texte : Bloc-notes, Notepad++, Sublime Text, Visual Studio Code, etc. Navigateur web : Google Chrome, Mozilla Firefox, etc. Une page html est un fichier (du texte) avec l’extension.html ou htm Exemple : index.html - acceuil.html EMSI 2AP HONORIS F. AIT BENNACER 8 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises À quoi ressemble un fichier HTML? Test.html Résultat EMSI 2AP HONORIS F. AIT BENNACER 9 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises en HTML Les pages HTML sont remplies de ce qu'on appelle des balises. Celles-ci sont invisibles à l'écran pour vos visiteurs, mais elles permettent à l'ordinateur de comprendre ce qu'il doit afficher. Les balises se repèrent facilement. Elles sont entourées de "chevrons", c'est-à-dire des symboles < et >, comme ceci : EMSI 2AP HONORIS F. AIT BENNACER 10 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises en HTML Exemple: EMSI 2AP HONORIS F. AIT BENNACER 11 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises en HTML On distingue deux types de balises : Les balises en paires : Elles s'ouvrent, contiennent du texte, et se ferment vers la fin. Ceci est un titre Les balises orphelines: Ce sont des balises qui servent le plus souvent à insérer un élément à un endroit précis (par exemple une image). EMSI 2AP HONORIS F. AIT BENNACER 12 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Les attributs Les attributs sont un peu les options des balises. Ils viennent Ies compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et a le plus souvent une valeur, comme ceci: EMSI 2AP HONORIS F. AIT BENNACER 13 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Structure de base d'une page HTML La structure de base d’une page HTML est la suivante : EMSI 2AP HONORIS F. AIT BENNACER 14 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Structure de base d'une page HTML La structure de base d’une page HTML est la suivante : Le doctype : Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. La balise principale du code. Elle englobe tout le contenu de votre page. L'en-tête. Cette section donne quelques informations générales sur la page, comme son titre, l'encodage (pour la gestion des caractères spéciaux), etc. Le corps. C'est là que se trouve la partie principale de la page. Tout ce que nous écrirons ici sera affiché à l'écran. EMSI 2AP HONORIS F. AIT BENNACER 15 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Structure de base d'une page HTML C'est le titre de votre page web : Elle indique l'encodage utilisé dans votre fichier.html. Utf-8: permet d'afficher sans aucun problème pratiquement tous les symboles de toutes les langues de notre planète. EMSI 2AP HONORIS F. AIT BENNACER 16 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Structure de base d'une page HTML Mon premier code HTML ! Ceci est un gros titre Ceci est un paragraphe EMSI 2AP HONORIS F. AIT BENNACER 17 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Structure de base d'une page HTML Commentaire : Il est visible dans le code source mais ignoré par le navigateur il sert à expliquer le code....... EMSI 2AP HONORIS F. AIT BENNACER 18 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les paragraphes Un paragraphe est délimité par la balise et On écrit le contenu de notre page web entre les balises et EMSI 2AP HONORIS F. AIT BENNACER 19 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les paragraphes Exemple:...... < !--Deux paragraphes différents--> Voici mon premier paragraphe. Et en voilà un second ! EMSI 2AP HONORIS F. AIT BENNACER 20 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les espaces et retours à la ligne C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne :. < !DOCTYPE html> < html> Première p age HTML < !--Les espaces ne seront pas affichés--> Voici mon premier paragraphe. Et en voilà un second ! < /html> EMSI 2AP HONORIS F. AIT BENNACER 21 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les espaces et retours à la ligne Résultat: EMSI 2AP HONORIS F. AIT BENNACER 22 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les titres Pour ne pas confondre entre les titres et les paragraphes en utilise les balise de titre qui sont de six (h1,h2,h3,h4,h5,h6) selon la taille. EMSI 2AP HONORIS F. AIT BENNACER 23 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les titres Première page HTML < !--Un titre tres important--> Mon titre principal Je suis un t itre important < !--Un autre titre important--> Moi aussi, je suis un titre important < !--Un titre un peu moins important--> Je suis un t itre d’important moyenne Un titre pas très important Un titre peu important Un titre vraiment peu important EMSI 2AP HONORIS F. AIT BENNACER 24 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les titres EMSI 2AP HONORIS F. AIT BENNACER 25 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Mettre le texte en gras: La balise met le texte en gras. Souligner le texte La balise souligne le texte. Mettre le texte en italique La balise met le texte en italique. EMSI 2AP HONORIS F. AIT BENNACER 26 Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte < head> Première page HTML < /head> Le langage HTML HTMLsignifie HyperText Markup Language. Ce langage est utilisé pour marquer sémantiquement un contenu. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Texte barré La balise ou barre le texte. < !DOCTYPE h tml> < html> < head> Première page HTML < /head> < body> Le langage HTML Ce texte est barré Ce texte est barré < /body> < /html> EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte La couleur et la taille de texte La balise avec ses attributs color et size( taille de 1 à 7) permet de modifier la couleur et la taille de texte. < head> Première page HTML < /head> Le langage HTML Un texte coloré U n a utre t exte c oloré EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Mettre le texte en exposant et indice La balise met le texte en exposant alors que la balise le met en indice. < head> Première page HTML < /head> X 2 H 2 O EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte La mise en valeur (import sémantique) Pour mettre un texte (mots) en valeur en utilise les balises (peu important ) et (important) < head> Première p age H TML < /head> Ceci est mon premier test, alors soyez indulgents Avant de faire le truc X il est n écessaire de faire le truc Y avant. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Marquer le texte: La balise permet de faire ressortir visuellement une portion de texte. < head> Première p age H TML < /head> Ceci est mon premier test EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Lignes horizontale: La balise permet de tracer une ligne horizontale. Trait horizontal (centré par défaut) Largeur du trait en % (100 % = largeur de la page) Hauteur du trait en pixels Hauteur du trait en pixels Trait centré (défaut) Trait aligné à gauche Trait aligné à droite Trait sans effet d’ombrage EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Organiser le texte Première page HTML < /head> EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les listes non-ordonnées Liste à puces non ordonnée : La balise permet de structurer notre texte, les éléments de la liste s’écrivent entre et Liste non-ordonnée en HTML < /head> Liste non-ordonnée Elément 1 Elément 2 EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les listes ordonnées Liste à puces ordonnée : La balise permet de structurer notre texte, les éléments de la liste s’écrivent entre et Liste non-ordonnée en HTML < /head> Liste ordonnée Elément 1 Elément 2 EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens Lien vers un autre site (page) : La balise avec son attribut href permet de faire un lien soit vers un autre site (internet) soit une page de note site. un titre pour le lien qui sera apparait en bleu et souligné < head> Liste non-ordonnée en HTML Les liens Cliquez sur ce lien pour aller sur Wikipédia. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens Lien vers une ancre Une ancre c’est un point de repère qui permet de sauter directement vers la partie qui vous intéresse, pour ce faire il suffit rajouter un attribut identifiant « id » à la balise. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens La première étape consiste à ajouter l'attribut id suivi de = pour donner un nom à l'ancre entre " " : Titre Cas n°1 : l'ancre est plus bas sur la même page. Dans ce premier cas, on crée un lien avec l'attribut href (il contient un dièse # suivi du nom de l'ancre) : Aller vers l'ancre Cas n°2 : l'ancre est située dans une autre page L’accueil EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens … Section 3... beaucoup de texte... Section 4... beaucoup de texte... Section 5 Aller directement à la section 5 Section 5 Aller directement à la section 3 Section 3 … EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens Un lien qui affiche une infobulle au survol : L'attribut title affiche une bulle d'aide lorsqu'on pointe sur le lien. … Bonjour pour accéder au site de la EMSI cliquez ici … EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens Afficher le site dans une autre fenêtre L’attribut target="_blank" fait en sorte que le lien hypertexte ouvre un nouvel onglet … Bonjour pour accéder au site de la EMSI cliquez ici … EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens Un lien pour envoyer un e-mail : Recevoir des email à partir de votre page. href="mailto:[email protected]" crée un lien hypertexte qui ouvre la boîte mail avec un nouveau message vide. … Envoyez-moi un e-mail … EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les liens NB : Un lien hypertexte s'appelle un lien absolu : il indique une adresse complète. Un lien hypertexte s'appelle un lien relatif : il indique où trouver notre fichier HTML. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les images Insérer une image: La balise orpheline permet l’insertion d’une image. Pour fonctionner correctement, la balise doit être accompagnée de deux attributs : 1. src : cet attribut permet d'indiquer la source de l'image. 2. alt : cet attribut permet de donner à l'image une description alternative. 3. title : afficher une bulle d'aide sur vos images, L'attribut title est facultatif, contrairement à alt EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les images Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte alternatif sera : inscrit à la place de l'image si elle ne peut pas être affichée au moment du chargement de la page web (cela arrive) audio-décrit par les navigateurs de personnes présentant un handicap (trouble de la vue, non- voyants) EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les images … … La description sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée, au survol « infobule » sera affiché EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les miniatures cliquables Une miniature cliquable est une image réduite sur une page web qui agit comme un lien cliquable vers une autre page ou une autre ressource en ligne. Si votre image est de grande taille, il est conseillé d'en afficher la miniature cliquable sur votre site. De cette manière vos pages web mettront moins de temps à s'afficher. Si vos visiteurs souhaitent voir vos images en taille originale, ils n'auront qu'à cliquer dessus. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les miniatures cliquables … … EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: Les tableaux – balise d’ouverture et fermeture du tableau – permet de créer une ligne. AJOUTER UN TITRE – permet de créer un titre de colonne. AU TABLEAU HTML – permet de créer une cellule dans la ligne. Mes clients FrédéricBarsoti MathildeDupont OmarMalalid CamilleLemaire EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Balises HTML: AJOUTER UN EN-TÊTE AJOUTER UN EN-TÊTE PrénomNom FrédéricBarsoti MathildeDupont OmarMalalid CamilleLemaire EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises FUSIONNER LES COLONNES D’UN TABLEAU HTML 1234 5678 9101112 Fusion colonne1516 EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises FUSIONNER LES LIGNES D’UN TABLEAU HTML 1234 5678 9101112 141516 EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises LES FORMULAIRES Type Description Affiche un champ de saisie de texte sur une seule ligne Affiche une case d’option (pour sélectionner l’un des nombreux choix) Affiche une case à cocher (pour sélectionner zéro ou plus parmi de nombreux choix) Affiche un bouton Soumettre (pour soumettre le formulaire) Affiche un bouton cliquable EMSI 2AP HONORIS F. AIT BENNACER Introduction CSS Introduction Syntaxe HTML Sélecteurs CSS Intégration dans HTML Les propriétés CSS, les couleurs, les bordures Introduction au CSS Problèmes HTML : HTML n’a jamais été destiné à contenir des balises de mise en forme d’une page web! HTML a été créé pour décrire le contenu d’une page web Résolution par le CSS : Permet la mise en page d’un contenu Appliquer un style à un élément pour changer son apparence Avant d’appliquer un style il faut obligatoirement sélectionner un ou plusieurs éléments. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction au CSS CSS : Cascading Style Sheets (pour Feuilles de style en cascade), c'est un autre langage qui vient compléter le HTML. Il s’agit d’un langage de style qui permet de gérer la mise en forme de des site web. EMSI 2AP HONORIS F. AIT BENNACER Introduction Introduction HTML HTML Avantages HTML CSS L’hypertexte JavaScript Outils de développement web Balises Introduction au CSS EMSI 2AP HONORIS F. AIT BENNACER Introduction CSS Introduction Syntaxe HTML Sélecteurs CSS Intégration dans HTML Les propriétés CSS, les couleurs, les bordures L’utilisation du CSS Les points de sélection à l’élément HTML que vous voulez appliquer le style. L’intégration de code CSS peut se faire en trois méthodes différentes 1. Dans un fichier avec l’extension.css (style.css par exemple) (méthode la plus recommandée). Créer le fichier style.css dans le même dossier que la page HTML, sinon spécifier le chemin du fichier (mon_dossier\...\style.css). … Ma page … EMSI 2AP HONORIS F. AIT BENNACER Introduction CSS Introduction Syntaxe HTML Sélecteurs CSS Intégration dans HTML Les propriétés CSS, les couleurs, les bordures L’utilisation du CSS test.html style.css EMSI 2AP HONORIS F. AIT BENNACER Introduction CSS Introduction Syntaxe HTML Sélecteurs CSS Intégration dans HTML Les propriétés CSS, les couleurs, les bordures L’utilisation du CSS 2. Dans l'en-tête du fichier HTML entre la balise et test.html EMSI 2AP HONORIS F. AIT BENNACER Introduction CSS Introduction Syntaxe HTML Sélecteurs CSS Intégration dans HTML Les propriétés CSS, les couleurs, les bordures L’utilisation du CSS 3. Directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée). titre de la page page.html

Programmation Web - Dev_web_toufik PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue