Webdesign Grundlagen: HTML5, CSS3, PHP, CMS & Co
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.
Wir geben Ihnen in diesem Blogartikel einen Überblick über verschiedene Auszeichnungssprachen und Tools im Webdesign.
Inhaltsverzeichnis
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 (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 Sie eine Webseite im Browser Ihres Computers oder mobilen Gerätes aufrufen, setzen Sie 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 sagt dem Browser: „Hier beginnt ein Absatz.“
- Ein schließendes Tag mit einem Schrägstrich sagt den Browser: „Hier endet der Absatz.“
<p>Das hier ist ein Absatz zwischen zwei HTML-Tags.</p>
Sie können ohne Kenntnisse in den Webdesign Grundlagen bereits ein erstes kleines HTML-Dokument erstellen. Öffnen Sie einen Editor, z. B. Notepad und geben Sie folgenden Code ein:
<html>
<head>
<title>Meine Webseite</title>
</head>
<body>
<p>Das hier ist ein Absatz zwischen zwei HTML-Tags.</p>
</body>
</html>
Speichern Sie das Dokument als HTML-Dokument mit der Endung .html ab und öffnen Sie es mit einem Browser. Sie erhalten diese Ausgabe in Ihrem 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.
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.
Benötigen Sie eine professionelle Webseite, einen Blog oder Online-Shop für Ihr Unternehmen? Webnumerus bieten Ihnen professionelle Lösungen. Kontaktieren Sie uns für ein kostenloses unverbindliches Gespräch!
Webnumerus Webdesign steht für modernes, ansprechendes und für Suchmaschinen optimiertes Webdesign. Seit 2019 unterstützen wir kleine und mittlere Unternehmen, die sich im Internet positionieren möchten.
Hinterlassen Sie einen Kommentar
Wollen Sie an der Diskussion teilnehmen?Wir freuen uns über Ihren Beitrag!