Themen

• Einführung
• Was ist das Web und wie funktioniert es?
• So machen Sie Ihre Website der Welt zugänglich
• Unverzichtbare Tools für Entwickler
• Wie viel kann man in der Webentwicklung verdienen?
• Tipps für Anfänger
• Fazit: Beginnen Sie noch heute

Einführung

Wenn Sie hier sind, dann deshalb, weil Sie verstehen möchten, wie die Welt der Webentwicklung funktioniert, und, wer weiß, Ihre ersten Schritte in einer neuen Karriere machen möchten. Dieser Leitfaden richtet sich an diejenigen, die sich in diesem Bereich noch nicht auskennen und von vorne beginnen und die Grundlagen verstehen möchten, bevor sie sich mit Sprachen und Werkzeugen befassen. Lassen Sie uns gemeinsam auf praktische und leicht zugängliche Weise erkunden, wie wir diese Reise beginnen können.

Was ist das Web und wie funktioniert es?

Das Web ist ein globales Netzwerk, das Millionen von Geräten und Systemen verbindet und den Zugriff auf und die Weitergabe von Informationen in Echtzeit ermöglicht. Mit anderen Worten: Das Web ist wie eine große digitale Bibliothek. Wenn Sie eine Website aufrufen, fragen Sie nach Informationen, die irgendwo auf der Welt gespeichert sind. Der Browser (wie Google Chrome oder Firefox) ist wie der „Bibliothekar“, der diese Informationen für Sie durchsucht und organisiert.

Hier sind die Schlüsselelemente, die dafür sorgen, dass alles funktioniert:

1. Browser und Server
Lassen Sie uns verstehen, was passiert, wenn Sie auf die Website https://www.pudim.com.br/ zugreifen. Der Browser stellt eine Anfrage an den Server, der mit den für die Anzeige der Seite erforderlichen Dateien antwortet. Im Fall von Pudim gibt der Server eine HTML-Datei zurück, die eine Grundstruktur der Website enthält, einschließlich eines Titels, eines Bildes und eines E-Mail-Links.

• Der Browser ist das Programm, mit dem Sie auf das Internet zugreifen (Chrome, Firefox usw.). Es stellt Informationsanfragen und zeigt Seiten organisiert an.

• Der Server ist der Computer, der die Dateien der Website (Texte, Bilder, Videos) speichert und sie an Ihren Browser sendet, wenn Sie als Benutzer dies anfordern. Stellen Sie sich den Server als einen „spezialisierten Computer“ vor, der die Dateien der Website (Texte, Bilder, Videos) speichert und auf Browseranfragen reagiert, indem er diese Dateien sendet. Es ist wichtig, dass die Website im Web zugänglich ist.
  Im Fall von Pudim gibt der Server eine HTML-Datei zurück, die eine Grundstruktur der Website enthält, einschließlich eines Titels, eines Bildes und eines E-Mail-Links.

2. Wie kommunizieren Browser und Server?
Wenn Sie auf eine Website wie Pudding zugreifen, müssen Browser und Server „sprechen“, damit der Inhalt korrekt angezeigt wird. Diese Kommunikation erfolgt über HTTP (HyperText Transfer Protocol), eine Reihe von Regeln, die definieren, wie Informationen gesendet und empfangen werden sollen. Der Browser sendet eine Anfrage an den Server (sogenannte HTTP-Anfrage), und der Server antwortet mit den erforderlichen Dateien (z. B. HTML, CSS und JavaScript), um die Seite im Browser zusammenzustellen. Dieser Informationsaustausch erfolgt schnell und effizient und stellt sicher, dass die Website korrekt angezeigt wird.

Praktisches Beispiel: Geben Sie „https://www.pudim.com.br/“ in den Browser ein und drücken Sie die Eingabetaste. Sie sehen eine einfache Seite mit einem Puddingbild und einem E-Mail-Link.

3. Was ist eine API und wie passt sie dazu?
Stellen Sie sich nun vor, dass die Pudim-Website auch die Wettervorhersage anzeigen möchte. Dazu könnte er eine API (Application Programming Interface) nutzen. APIs fungieren als Brücken, die es verschiedenen Systemen ermöglichen, Informationen auszutauschen.
Stellen Sie sich zum Beispiel vor, dass auf der Pudding-Website auch eine Meldung angezeigt wird wie „Heute ist ein guter Tag, um Pudding zu essen!“ basierend auf dem aktuellen Wetter. Der Browser würde eine Anfrage an eine Wetter-API senden, die Informationen über die Temperatur und die Wetterbedingungen zurückgeben würde. Die Website könnte diese Nachricht dann dynamisch anzeigen.

Zusammenfassung: APIs sind wesentliche Werkzeuge in der modernen Webentwicklung, da sie es Ihnen ermöglichen, dynamische Funktionen, wie z. B. Daten, von allem hinzuzufügen, die in Echtzeit aktualisiert werden.
Nachdem Sie nun die Grundlagen verstanden haben, beginnen wir mit dem Erlernen der grundlegenden Tools zum Erstellen einer Website.

1. HTML: Die Struktur der Website
HTML (HyperText Markup Language) definiert die Struktur der Seite. Es besteht aus Tags, das sind Elemente, die angeben, wie der Inhalt organisiert und im Browser angezeigt wird. Jedes Tag hat eine bestimmte Funktion und kann unter anderem Text, Bilder, Links und andere Elemente enthalten.
Beispiel-Tags:

• : Legt einen Haupttitel fest.

• : Definiert einen Textabsatz.

• : Fügt ein Bild auf der Seite ein.
• : Erstellt einen Link.

<!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> 

<!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> 

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