Bienvenue dans le développement Web : un guide pratique pour ceux qui partent de zéro-js tutoriel-php.cn

Bem-vindo ao desenvolvimento Web: Um guia prático para quem está começando do zero

Sujets

Présentation
Qu'est-ce que le Web et comment ça marche ?
Comment rendre votre site Web accessible au monde entier
Outils essentiels pour les développeurs
Combien pouvez-vous gagner en développement Web ?
Conseils pour les débutants
Conclusion : commencez aujourd'hui

Introduction

Si vous êtes ici, c'est parce que vous souhaitez comprendre comment fonctionne le monde du développement web et, qui sait, faire vos premiers pas dans une nouvelle carrière. Ce guide s'adresse à vous qui ne connaissez rien au domaine et souhaitez commencer depuis le début, comprendre les fondamentaux avant de vous plonger dans les langages et les outils. Explorons ensemble, de manière pratique et accessible, comment commencer ce voyage.

Qu’est-ce que le Web et comment ça marche ?

Le Web est un réseau mondial qui connecte des millions d'appareils et de systèmes, permettant d'accéder et de partager des informations en temps réel. En d’autres termes, le Web est comme une grande bibliothèque numérique. Lorsque vous accédez à un site Web, vous demandez des informations stockées quelque part dans le monde. Le navigateur (comme Google Chrome ou Firefox) est comme le « bibliothécaire » qui recherche et organise ces informations pour vous.

Voici les éléments clés qui font que tout fonctionne :

1. Navigateur et serveur
Comprenons ce qui se passe lorsque vous accédez au site https://www.pudim.com.br/. Le navigateur fait une requête, une requête au serveur, qui répond avec les fichiers nécessaires à l'affichage de la page. Dans le cas de Pudim, le serveur renvoie un fichier HTML contenant une structure de base du site Web, qui comprend un titre, une image et un lien email.

Le navigateur est le programme que vous utilisez pour accéder à Internet (Chrome, Firefox, etc.). Il effectue des demandes d'informations et affiche les pages de manière organisée.
Le serveur est l'ordinateur qui stocke les fichiers du site Web (textes, images, vidéos) et les envoie à votre navigateur lorsque vous, l'utilisateur, le demandez. Considérez le serveur comme un « ordinateur spécialisé » qui stocke les fichiers du site Web (textes, images, vidéos) et répond aux requêtes du navigateur en envoyant ces fichiers. Il est essentiel que le site internet soit accessible sur le web.
Dans le cas de Pudim, le serveur renvoie un fichier HTML contenant une structure de base du site Web, qui comprend un titre, une image et un lien email.

2. Comment le navigateur et le serveur communiquent-ils ?
Lorsque vous accédez à un site Web, comme Pudding, le navigateur et le serveur doivent « parler » pour que le contenu s'affiche correctement. Cette communication s'effectue via HTTP (HyperText Transfer Protocol), un ensemble de règles qui définissent la manière dont les informations doivent être envoyées et reçues. Le navigateur envoie une requête au serveur (appelée requête HTTP) et le serveur répond avec les fichiers nécessaires (tels que HTML, CSS et JavaScript) pour assembler la page dans le navigateur. Cet échange d'informations est rapide et efficace, garantissant le bon affichage du site.

Exemple pratique : Tapez "https://www.pudim.com.br/" dans le navigateur et appuyez sur Entrée. Vous verrez une page simple avec une image de pudding et un lien e-mail.

3. Qu'est-ce qu'une API et comment s'intègre-t-elle ?
Imaginez maintenant que le site Pudim souhaite également afficher les prévisions météorologiques. Pour ce faire, il pourrait utiliser une API (Application Programming Interface). Les API fonctionnent comme des ponts qui permettent à différents systèmes d'échanger des informations.
Par exemple : imaginez que le site Web Pudding affiche également un message du type « Aujourd'hui est un bon jour pour manger du pudding ! » en fonction de la météo actuelle. Le navigateur enverrait une requête à une API météo, qui renverrait des informations sur la température et les conditions météorologiques. Le site internet pourrait alors afficher ce message de manière dynamique.

Résumé : Les API sont des outils essentiels dans le développement Web moderne car elles vous permettent d'ajouter des fonctionnalités dynamiques, telles que des données, à partir de n'importe quoi, mises à jour en temps réel.
Maintenant que vous comprenez les bases, commençons à apprendre les outils de base pour créer un site Web.

1. HTML : la structure du site
HTML (HyperText Markup Language) définit la structure de la page. Il est composé de balises, qui sont des éléments qui indiquent comment le contenu sera organisé et affiché dans le navigateur. Chaque balise a une fonction spécifique et peut contenir du texte, des images, des liens, entre autres éléments.
Exemples de balises :

: définit un titre principal.
: définit un paragraphe de texte.
: Insère une image sur la page.
: crée un lien.

Exemple pratique : Créez un fichier appelé index.html et collez le code suivant :

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Copier après la connexion

Ouvrez le fichier dans le navigateur et voyez votre première page Web !

2. CSS : Le style de page
CSS (Cascading Style Sheets) est utilisé pour donner de la couleur, de la forme et du style au site Web, le rendant ainsi plus beau.
Comment fonctionne CSS :

Sélecteurs : identifiez les éléments que vous souhaitez styliser. Par exemple, body pour le corps de la page ou h1 pour les titres.
Propriétés et valeurs : Spécifiez le style appliqué. Par exemple, couleur : bleu ; change la couleur du texte en bleu.

Exemple de règles CSS :

corps { couleur d'arrière-plan : #f0f0f0 ; } définit la couleur d'arrière-plan de la page.
h1 { taille de police : 24px ; couleur : #0066cc ; } change la taille et la couleur du titre.

Exemple pratique : Créez un fichier appelé styles.css et ajoutez ce qui suit :

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Meu Primeiro Site</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é o meu primeiro site usando HTML.</p>
</body>
</html>

Copier après la connexion

Connectez CSS au HTML en ajoutant la ligne ci-dessous dans le à partir du fichier index.html :

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
}
h1 {
  color: #0066cc;
}

Copier après la connexion

Actualisez votre navigateur et voyez les changements de style de page.

3. JavaScript : ajout d'interactivité
JavaScript est le langage qui rend la page interactive, vous permettant d'ajouter des animations, de valider des formulaires, de manipuler des éléments, etc. (nous parlerons davantage de javascript dans un autre post, restez connectés ❤)

Exemple d'interactivité :