Nice document for studiying, Study Guides, Projects, Research of Socialization and the Life Course

Download Nice document for studiying and more Study Guides, Projects, Research Socialization and the Life Course in PDF only on Docsity!

Halima El Hamdaoui

Technologies

Web

2022 - 2023 Université Sidi Mohamed Ben Abdellah Ecole Supérieure de Technologie Fès

➢ Partie 1 : Introduction aux Technologies web

➢ Partie 2 : HTML

➢ Partie 3 : CSS

Plan

Technologie web: Introduction C’est quoi le web?

❑ The World Wide Web: WWW

❑ Il fait référence au système hypertexte fonctionnant sur le

réseau informatique mondial Internet.

❑ le Web se résume à cet outil qui permet la consultation, via

un navigateur, de pages de sites Internet (ou sites Web).

❑ Inventé en 1990 par Tim Berners-Lee suivi de Robert Cailliau,

c'est le Web qui a rendu les médias grand public attentifs à

Internet.

Technologie web: Introduction Notions

❑ HTTP (pour HyperText Transfer Protocol) est le protocole de

communication communément utilisé pour transférer les

ressources du Web. HTTPS est la variante

avec authentification et chiffrement.

❑ Une URL (pour Uniform Resource Locator, signifiant

littéralement « localisateur de ressource uniforme ») est

une chaîne de caractères décrivant l’emplacement d’une

ressource.

Technologie web: Introduction La base du web

• Architecture Client (navigateur Web) / Serveur (Web)
• Nécessite d'un protocole de communication : HTTP

Technologie web: Introduction Différents types de resource

❑ Ressources statiques

• Fichier texte, XML, HTML, images, son, videos

❑ Ressources dynamiques côté client

• applet (Java), Javascript/jQuery, Plugin, ActiveX, ...

❑ Ressources dynamiques côté serveur

• CGI, servlets/JSP, scripts serveur (php), ...

Technologie web: HTML Définition

• 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.
• Ce langage est définit par le W 3 C (World Wide Web consortium), organisme indépendant chargé de la normalisation et de la recherche sur la technologie Web
• Présentation de données permettant de créer des pages web pouvant être lues dans des navigateurs. Ce n'est pas un langage de programmation

Technologie web: HTML Pourquoi HTML?

• HTML est utilisé pour créer des sites Web.
• Il est pris en charge par tous les navigateurs.
• Il peut être intégré à d'autres langages comme CSS, JavaScript, etc.. Avantages (^) Inconvénients - HTML ne peut créer que des pages Web statiques. - Pour les pages Web dynamiques, d'autres langues doivent être utilisées. - Une grande quantité de code doit être écrite pour créer une page Web simple.

Technologie web: HTML Outils de développement

• Editeur de texte (bloc note, Notepad++, Bracket, Sublime…etc)
• Navigateur (Chrome, Mozilla FireFox…etc).

Technologie web: HTML Construire des sites Web

• Déterminez pourquoi vous créez ce site. Que souhaitez-vous transmettre?
• Pensez à votre public. Comment pouvez-vous adapter votre contenu pour attirer ce public? Par exemple, devez-vous ajouter beaucoup de graphiques ou est-il plus important que votre page télécharger rapidement?
• De combien de pages aurez-vous besoin?
• Dessinez votre site sur papier. Concevez un système de nommage simple et cohérent pour vos pages, images et autres des dossiers

Technologie web: HTML Introduction: Langage à balises

❑ Squelette d’un document HTML 5

Technologie web: HTML Structure d’une page HTML ❑ Le doctype: Elle est indispensable car c'est elle qui indique qu'il s'agit bien d'une page web HTML. ❑ C'est 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.

Technologie web: HTML Les balises 3 types d’éléments ❑ Élément bloc (div) : élément précédé et suivi d’un saut de ligne. Il forme une boite dans lequel est inclus du texte ou d’autres éléments.

• Exemples : les paragraphes, les tableaux, ... ❑ Élément inline (span ) : élément qui s’insère dans le fil du texte et ne peut contenir que du texte ou d’autres éléments inlines.
• Exemples : mise en exergue, ... ❑ Élément auto-fermant : élément qui est une balise ouvrante et fermante à la fois. Elle n’a donc pas de contenu. Ce sont soit des balises de type bloc, soit de type inline. Synthaxe : ou
• Exemples : saut de ligne, séparation horizontale ...

Technologie web: HTML Les balises ❑ Apporte du sens

• : titre de la page
• : grand titre
• : titre de second niveau
• -
  : paragraphe - : portion de code informatique ❑ Mise en forme - : génère un saut de ligne Structuration d’un document :, , , …