Wenn man sich als Laie und Anfänger eine Übersicht über die Webdesign Grundlagen beschaffen möchte, wird man anfangs von Fachbegriffen regelrecht erschlagen. Hypertext Markup Language, Cascading Style Sheets, PHP: Hypertext Preprocessor, Content-Management-System, File Transfer Protocol …
Auch wenn es hierbei lediglich um Webdesign Grundlagen handelt, so ist es für einen technisch weniger versierten Laien umso komplizierter sich zurechtzufinden oder eine eigene Website zu erstellen. Aus diesem Grund gibt es Webdesigner.
In diesem Blogartikel gebe ich einen Überblick über verschiedene Auszeichnungssprachen und Tools im Webdesign.
Webdesign Grundlagen: Die Grundlagen des World Wide Web
Unser Leben ist heute digitalisiert und durch das Web geprägt. Unterwegs braucht man nur das Smartphone zu zücken und hat sofort alle im Web verfügbaren Informationen zur Verfügung. Ob Navigation, Suche nach einem Restaurant, eine Online-Bestellung, Bezahlung per Online-Banking oder einfach nur eine reine Information, das World Wide Web ermöglicht all dies.
In der Wikipedia heißt es dazu:
„Das World Wide Web ist ein über das Internet abrufbares System von elektronischen Hypertext-Dokumenten, sogenannten Webseiten.“
Das Internet ist also eine Sammlung von Webseiten? Vorsicht: Umgangssprachlich wird das Internet (von englisch internetwork) mit dem WWW gleichgesetzt. Das WWW stellt jedoch nur eines der vielen Anwendungsmöglichkeiten des Internets dar. Um die Webdesign Grundlagen zu verstehen, ist eine Unterscheidung dieser beiden Technologien wichtig.
Webseiten bzw. Hypertext-Dokumente werden durch Hyperlinks untereinander verknüpft und über die beiden Protokolle HTTP und HTTPS übertragen. Jedes Mal, wenn du eine Webseite im Browser deines Computers oder mobilen Gerätes aufrufst, setzt du eine solche Übertragung in Gang. Diesen Prozess nennen wir umgangssprachlich „Surfen im Internet.“
Die Grundlagen des World Wide Web helfen beim Verständnis der Webdesign Grundlagen.
Webdesign Grundlagen: HTML
HTML steht für Hypertext Markup Language und ist eine leicht zu erlernende Auszeichnungssprache, um Inhalte im Web zu strukturieren. Es zählt somit zu den absoluten Webdesign Grundlagen. Mit HTML lassen sich Inhalte wie Überschriften, Absätze, Aufzählungen oder Tabellen in einem HTML-Dokument logisch strukturieren.
Die Erstellung von Webseiten wird umgangssprachlich häufig als „Programmieren“ bezeichnet.
HTML ist jedoch keine Programmiersprache, wie z. B. Java, C oder C++.
Bei der Erstellung einer Webseite mit HTML werden HTML-Tags verwendet. HTML-Tags sind Anweisungen in spitzen Klammern, die den Browser mit Informationen über den Aufbau der Seite versorgen.
Der Aufbau der HTML-Tags sieht folgendermaßen aus:
- Ein öffnendes Tag <p> sagt dem Browser: „Hier beginnt ein Absatz.“
- Ein schließendes </p>-Tag mit einem Schrägstrich sagt den Browser: „Hier endet der Absatz.“
<p>Das hier ist ein Absatz zwischen zwei HTML-Tags.</p>Du kannst ohne Kenntnisse in den Webdesign Grundlagen bereits ein erstes kleines HTML-Dokument erstellen. Öffne einen Editor, z. B. Notepad und gib folgenden Code ein:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<p>Das hier ist ein Absatz zwischen zwei HTML-Tags.</p>
</body>
</html> Speichere das Dokument als HTML-Dokument mit der Endung .html ab und öffne es mit einem Browser. Du erhältst diese Ausgabe im Browser:
CSS
Zu den weiteren Webdesign Grundlagen gehört CSS. Dieses steht für Cascading Style Sheets und ist eine Stylesheet-Sprache. In sehr frühen Zeiten der Webentwicklung wurde eine Webseite ausschließlich mit HTML erstellt. HTML strukturierte diese und zeigte die Darstellung – doch nicht mehr und nicht weniger.
Erst durch CSS kann ein ordentliches Design umgesetzt werden. CSS erweitert HTML mit Regeln für Schriften, Farben und Layout. Es beschreibt auch die Sprach- und Druckausgabe. Die CSS-Regeln können im style-Tag im head-Element des HTML-Dokuments stehen. Genauso können sie in eine externe CSS-Datei ausgelagert und mit einem link-Tag in das HTML-Dokument eingebunden werden.
<head>
<link rel="stylesheet" href="datei-style.css">
<style>
body { font-family: Arial; }
</style>
<head>CSS gehört zu den Webdesign Grundlagen und hat die Aufgabe, Inhalt und Layout zu trennen. Bei dieser Trennung werden nur noch die inhaltliche Gliederung eines Dokuments und seine Bedeutung in HTML beschrieben.
JavaScript
JavaScript ist eine zentrale Programmiersprache in der Webentwicklung, die dynamische und interaktive Inhalte ermöglicht. Somit gehört JavaScript zu den Webdesign-Grundlagen. Es arbeitet Hand in Hand mit HTML und CSS, wobei HTML für die Struktur einer Webseite und CSS für das Design verantwortlich ist, während JavaScript für die Interaktivität sorgt. In der Webentwicklung wird JavaScript hauptsächlich auf der Client-Seite, also direkt im Browser des Nutzers, eingesetzt, um Benutzereingaben zu verarbeiten, Animationen zu erzeugen oder Inhalte ohne Neuladen der Seite zu aktualisieren. Ein klassisches Beispiel ist die Überprüfung von Formulardaten, bevor diese an den Server gesendet werden. Darüber hinaus spielt JavaScript eine Schlüsselrolle bei der Kommunikation zwischen einer Webseite und einem Server.
Durch Techniken wie AJAX oder die Fetch API kann JavaScript Daten im Hintergrund abrufen oder senden, was eine nahtlose Nutzererfahrung schafft. Bibliotheken und Frameworks wie jQuery, React, Vue.js oder Angular haben JavaScript weiter revolutioniert, indem sie das Erstellen komplexer Benutzeroberflächen und das Handling großer Datenmengen vereinfachen. JavaScript kann jedoch nicht nur im Frontend eingesetzt werden. Mit Node.js hat sich die Sprache auch im Backend etabliert, wodurch Entwickler vollständige Webanwendungen mit nur einer Sprache schreiben können. Dank seiner Flexibilität und breiten Einsatzmöglichkeiten bleibt JavaScript eine der gefragtesten Sprachen in der Webentwicklung und bildet das Fundament für moderne, interaktive Webseiten.
PHP
Um Webdesign Grundlagen zu erlernen und hervorragende Webseiten zu erstellen, genügen die Kenntnisse in HTML und CSS. Möchte man sich jedoch über die Webdesign Grundlagen hinaus entwickeln und dynamische Webseiten oder Webanwendungen entwickeln, so kann man eine Skriptsprache wie PHP lernen.
PHP ist rekursives Akronym und Backronym für „PHP: Hypertext Preprocessor“ und hieß früher „Personal Home Page Tools.“ Es zeichnet sich durch eine breite Datenbankunterstützung und die Verfügbarkeit vieler Funktionsbibliotheken aus.
Ein PHP-Skript lässt sich problemlos in ein HTML-Dokument integrieren:
<!DOCTYPE HTML>
<html>
<head>
<title>Hallo-Welt</title>
</head>
<body>
<?php echo 'Hallo Welt!'; ?>
</body>
</html>PHP ist plattformübergreifend und findet einen breiten Einsatz in Content-Management-Systemen (CMS).
Content-Management-Systeme (CMS)
Bei den genannten Webdesign Grundlagen handelt es sich um Auszeichnungs- und Skriptsprachen, die für die Erstellung von Webseiten unerlässlich sind. Doch Webseiten, Blogs und Online-Shops lassen sich auch ohne Kenntnisse dieser Sprachen und Codeeingaben in Editoren erstellen. Für diesen Zweck gibt es grafische Content-Management-Systeme.
Ein Content-Management-System oder CMS ist ein Inhaltsverwaltungssystem zur Erstellung, Bearbeitung und Organisation von Inhalten in Webseiten, Blogs und Online-Shops. Es sind keine oder wenige HTML-Kenntnisse für die Bedienung eines CMS erforderlich, da diese Systeme über eine grafische Benutzeroberfläche verfügen. Somit ist eine Webseite oder ein Blog ohne Weiteres für einen Laien ohne Wissen in Webdesign Grundlagen nach einer kurzen Einarbeitung erstellbar.
Das weltweit mit Abstand populärste CMS ist das Open-Source-CMS WordPress. Dieses basiert auf der Skriptsprache PHP und kann durch zahlreiche Plug-ins um diverse Funktionen erweitert werden. Alle Erweiterungen lassen sich mittels des eingebauten Editors bearbeiten.
Neben WordPress zählen Joomla, TYPO3 und Drupal zu den bekanntesten und meistverwendeten Content-Management-Systemen.
File Transfer Protocol (FTP)
Das File Transfer Protocol (FTP) ist ein standardisiertes Netzwerkprotokoll, das den Transfer von Dateien zwischen einem Client und einem Server über ein TCP/IP-Netzwerk ermöglicht. Es wurde entwickelt, um große Dateien effizient und zuverlässig über das Internet oder ein lokales Netzwerk zu übertragen. FTP arbeitet nach dem Client-Server-Prinzip, wobei der Client eine Verbindung zu einem FTP-Server herstellt, um Dateien hoch- oder herunterzuladen. Die Authentifizierung erfolgt in der Regel über einen Benutzernamen und ein Passwort, wobei es auch die Möglichkeit gibt, anonymen Zugriff zu gewähren. FTP verwendet zwei Verbindungen: eine zur Steuerung der Kommunikation und eine separate zur Datenübertragung, was es ermöglicht, mehrere Dateien gleichzeitig zu übertragen.
Zu den gängigen Befehlen gehören das Auflisten von Verzeichnissen, das Hoch- und Herunterladen von Dateien sowie das Löschen oder Umbenennen von Dateien auf dem Server. Obwohl FTP weit verbreitet ist, weist es Sicherheitslücken auf, da Daten, einschließlich Anmeldeinformationen, im Klartext übertragen werden. Aus diesem Grund werden sicherere Alternativen wie SFTP (Secure File Transfer Protocol) oder FTPS (FTP Secure) bevorzugt, die eine Verschlüsselung der Verbindung bieten. FTP bleibt jedoch eine wichtige Methode für die Verwaltung von Dateien auf Webservern, insbesondere für Webentwickler und Systemadministratoren, die regelmäßig Dateien zwischen lokalen Rechnern und Servern übertragen müssen. Somit zählt FTP zu den Webdesign Grundlagen.
- Die Geschichte des Webdesigns: Eine Reise durch die digitale Zeit – 25. November 2024
- Suchmaschinen-Indexierung verhindern: So bleibt der Google-Crawler fern – 28. Oktober 2024
- Wie kann man eine Website erstellen?: Ist das der beste Weg? – 20. Oktober 2024
Schreiben Sie einen Kommentar