Technologies Web - HTML pages PDF

Introduction Internet : Un réseau mondial de machines interconnectées Un réseau de réseaux Des protocoles de communication (TCP-IP) Nombreuses applications: courrier électronique, transfert de fichiers(ftp), messagerie instantanée, etc....

Introduction Internet : Un réseau mondial de machines interconnectées Un réseau de réseaux Des protocoles de communication (TCP-IP) Nombreuses applications: courrier électronique, transfert de fichiers(ftp), messagerie instantanée, etc. 4 Introduction Web : Repose sur internet Système d’information réparti en page web Basé sur la notion d’hypertexte et la notion d’hyperliens permettant de naviguer entre les documents web Des protocoles de communication HTTP, HTTPS Des adresses pour nommer les documents: URL Des langages pour créer les documents: HTML, CSS, javascript Des navigateurs qui interprètent les documents. 5 Introduction Développement front-end et back-end : Le développement front-end : conception de l’interface graphique de l’utilisateur la partie visible de l’application, destinée à être manipulée par un tiers. Les compétences du développeur front-end sont, au minimum : HTML, CSS, Javascript Il peut aussi se reposer sur les frameworks suivants :jQuery, Angular, Bootstrap, Foundation, Semantic UI Le développement back-end : a pour objectif de permettre à un site ou à une application de fonctionner. développement des fonctionnalités de l’application construire, développer et mettre en interaction trois piliers essentiels au fonctionnement de l’application : Le serveur d’hébergement, L’application web et la base de données. Les compétences du développeur back-end sont : PHP, Python, SQL, … 6 Introduction Comment fonctionne le Web ? C'est un mécanisme client-serveur. Le client demande un fichier, le serveur lui donne tel qu'il est stocké : processus statique. Le serveur peut aussi générer un fichier en fonction de la demande du client : processus dynamique. Une URL est une chaîne de caractères utilisée pour adresser les ressources dans le Web Exemple : http://www.example.com/chemin/page.html?q=req http : protocole www.example.com : hôte /chemin/ : chemin absolu sur le service page.html : nom de la page Web q=req : chaine de requête, transmise à la page 7 Introduction Architecture Client- Serveur : 8  Langage HTML Hyper Texte Markup Langage 01 Ch. I. Hyper Texte Markup Langage Présentation et général : Qu’est-ce que le HTML ? Le html « HyperText Mark-Up Language » est le langage qui va vous permettre de structurer une page Web à l'aide de plusieurs balises, c’est avec ces fameuses balises qu'on va créer une simple page Web avec des liens hypertextes, ça veut dire des relations entre d'autre pages Web par un simple click, bien sûr on peut faire plus que ça "insérer des images" etc … 10 Ch. I. Hyper Texte Markup Langage Présentation et général : HTML: Bref historique des normes : WWW Project Proposal (mars 1989) W3 Consortium (1994) http://www.w3.org HTML 1.0 (août 1994) HTML 2.0 (novembre 1995) HTML 3.2 (janvier 1997) HTML 4.0 (avril 1998) HTML 4.01 (décembre 1999) XHTML 1.0 (janvier 2000) HTML 5 standard depuis 2014 11 Ch. I. Hyper Texte Markup Langage Présentation et général : (le principe de balise ) La description d’un document HTML passe par l’utilisation de BALISES. Une balise est délimitée par les signes « < » et « > » entre lesquels figure le nom de la balise. Par exemple, la balise de retour à la ligne est. La plupart du temps, on utilise une balise de début et une balise de fin, qui définissent les propriétés de l’intervalle. 12 Ch. I. Hyper Texte Markup Langage Présentation et général : (le principe de balise ) Les balises structurent le contenu de la page (texte, images, etc.) Chaque balise a un rôle et donne du sens au contenu présenté On peut imbrique les balises les unes dans les autres Le nom des balises est prédéfini dans les spécifications HTML, on ne peut donc pas en inventer! Par convention et pour faciliter la lecture du code, toute balise ouverte doit être fermée (sauf exception). Exemple : écriture en gras Balise ouvrante *contenu* Balise fermante 13 Ch. I. Hyper Texte Markup Langage Présentation et général : (Attributs et valeurs) Certaines balises peuvent être complétées par des attributs précisant certains paramètres (l’@ des liens, source d’une image à afficher, etc.) Une balise peut contenir plusieurs attributs. Les attributs sont des éléments prédéfinis dans le HTML on ne peut en inventer. Les attributs sont toujours dans la balise ouvrante. Exemple : Bonjour ! Balise attribut valeur 14 Ch. I. Hyper Texte Markup Langage Structure d'une page HTML : Voici à quoi ressemble le code d'une page HTML : le titre de la page le corps de la page 15 Ch. I. Hyper Texte Markup Langage La balise – Commentaire : Commentaire : Les commentaires peuvent être placés n’importe où dans un document HTML à condition de ne pas être imbriqués. Ils sont placés entre les chaînes de caractères. Exemple : 16 Ch. I. Hyper Texte Markup Langage La balise – doctype : La notion de doctype : Permet au navigateur de savoir quelle version de HTML (ou XHTML) est utilisée sur la page pour la version HTML5 17 Ch. I. Hyper Texte Markup Langage La balise – html - head : html : Tout document HTML commence par la balise qui se ferme en fin de document : La balise contient nécessairement deux balises définissant l’entête () et le corps () du document. En-tête : L’en-tête du document est réservé aux méta-informations (les information relative au document) comme son titre. Ces méta-informations doivent être placées entre les balises de début et de fin. 18 Ch. I. Hyper Texte Markup Langage La balise – title : title : Titre Chaque document HTML, pour être correct, doit disposer d’un titre. Le titre apparaît le plus souvent dans la barre de titre du navigateur Web. Son but est de pouvoir identifier le document dans un ensemble plus large (la recherche sur internet). Le titre sert en référencement (reprise dans les résultats de recherche). 19 Ch. I. Hyper Texte Markup Langage La balise – body : Corps du document : Le corps du document, ce qui sera effectivement affiché par le navigateur Web, est balisé par les commandes: et. Exemple : Ceci est mon premier programme en HTML. 20 Ch. I. Hyper Texte Markup Langage Construire sa page personnelle : Comment faire ? Les Outils disponibles : Directement en HTML Avec un éditeur de traitement de texte. Bloc-notes WinEdt … Avec un éditeur HTML spécialisé. Dreamweaver HTML author … 21 Ch. I. Hyper Texte Markup Langage Construire sa page personnelle : Nous allons commencer par créer un document html très petit. Lancez bloc notes et recopiez le texte suivant : essai n°1 Bonjour tout le monde. 22 Ch. I. Hyper Texte Markup Langage La base : essai n°1 : 23