Digital Gardening

Beim Digital Gardening gönnst du dir dein eigenes Stück Internet. Anfangen ist ganz leicht und kostenlos! Hier zeigen wir dir, wie es geht und wie auch du teil der Indie Web Community werden kannst.

Inhalt

Vorbereitung🔗

Im Grunde ist alles, was du zur Vorbereitung benötigst ein Texteditor. Wichtig: Word ist kein Texteditor, sondern ein Word-Prozessor. Ein Texteditor speichert Textdateien ohne Formatierung. Beispiele hierfür sind Notepad (Windows) oder TextEdit (macOS), die mit den entsprechenden Betriebssystemen mitkommen. Wirklich empfehlenswert sind diese allerdings auch nicht. Für einen ordentlichen Einstieg empfehlen wir Zed, das es für Linux, macOS und Windows gibt. Zed ist ein Texteditor mit eingebauten Entwicklungsfunktionen, wie Auto-Vervollständigung und Syntax-Highlighting, die dir das Leben auf Dauer einfacher machen.

HTML Basics🔗

HTML ist die Sprache des Web. Alle Internetseiten, die du jemals besucht hast sind letztendlich HTML-Dokumente. Aber was ist ein HTML-Dokument genau? Nun, im Grunde eine Textdatei. Das einfachste valide HTML-Dokument sieht so aus:

Code

<!DOCTYPE html>
<title>Hi</title>
Hi.

Vorschau

Zu sehen sind drei Dinge: die Doctype Definition (DTD), der Titel der Seite und ein bisschen Inhalt. Du musst den Text natürlich nicht formatieren. Das Bunte ist "Syntax Highlighting" und es soll den Code etwas übersichtlicher machen. Die DTD ist immer die Selbe und muss in jedem Dokument vorhanden sein. Beim Titel wird es schon spannender: dieser muss zwar auch immer vorhanden sein, du kannst ihn aber selbst angeben. Wenn du deine Website in einem Tab öffnest, bestimmt der Titel den Namen des Tabs.

Tags🔗

Der Titel ist sog. "Tags" (eng: /ˈtæɡs/) eingefasst. Tags sind die Essenz von HTML. In HTML is alles ein Tag. So stellst du z.B. Text in fetter Schrift dar: <b>Hi</b> → Hi. Es gibt (fast) immer ein öffnendes Tag (z.B. <title>) und ein dazugehöriges schließendes Tag (z.B. </title>). Tags, die ineinander verschachtelt sind, dürfen sich nicht überlappen. Um Inhalte vom Browser ignorieren zu lassen, kannst du mit  einen Kommentar in deinen Code einfügen.

<!-- Verboten:                            -->
<!-- a beginnt        a endet             -->
<!--   |    b beginnt   |     b endet     -->
<!--   |      |         |        |        -->
      <a>    <b>      </a>     </b>

<!-- Erlaubt:                             -->
<!-- a beginnt       b endet              -->
<!--   |   b beginnt    |     a endet     -->
<!--   |      |         |        |        -->
      <a>    <b>      </b>     </a>

Nun muss ich zugeben, dass ich eben ein wenig geflukert habe. Technisch gesehen ist das oben angezeigte HTML-Dokument tatsächlich das kleinste valide Dokument. Allerdings besteht ein vollständiges HTML aus ein paar mehr Tags:

Code

<!DOCTYPE html>
<html>
	<head>
		<title>Hi</title>
	</head>
	<body>
		Hi.
	</body>
</html>

Vorschau

In der minimalen Variante fügt dein Browser die fehlenden Tags einfach automatisch hinzu. Das <head>-Tag ist dazu da, um Metadaten über das Dokument anzugeben. Dazu gehören z.B. der Titel der Seite, Styles (in CSS), Programmcode (in JavaScript), der verwendete Zeichensatz… you name it. In den <body> kommt dann der Inhalt der Seite. Und da per Definition der <body> da beginnt, wo der erste Inhalt zu finden ist, der nicht mehr in den <head> gehört, kann der Browser das automatisch herausfinden. Warum ich dir das sage? Um dir zu zeigen, dass der Browser einem oft kleine Fehler und Ungenauigkeiten vergibt. Das kann dir das Leben als Autor einer Seite erleichtern, muss es aber nicht.

Bevor wir zu den Arten von Tags kommen noch ein letztes Konzept: Attribute. Außer dem Inhalt, der in sie eingeschlossen ist können Tags noch weitere Informationen halten. Hier z.B. ein html-Tag, das Informationen über die Sprache des Dokuments enthält: <html lang="de">. Du siehst, Attribute folgen einer einfachen Syntax: name="information". Es gibt Attribute, die in jedem Tag vorkommen können, sowie solche, die nur in einem Bestimmten Kontext sinnvoll sind. Warum, wird sicher gleich ersichtlich.

Grundlegende Tags🔗

Elemente (also Tags mit ihrem Inhalt), können in drei Kategorien eingeteilt werden:

Block-Elemente: sind Elemente, die einen Textumbruch erzeugen.
Inline-Elemente: sind Elemente, die sich mit Text zusammen in einer Zeile befinden können.

Ein paar Beispiele:

Tag & Beschreibung	Beispiel
Ein Link: `<a href="#">` Das `href`-Attribut legt fest, wohin er zeigt.	Code <a href="https://computerwerk.org/"> Computerwerk </a> Vorschau
Verstärkt: `<strong>` Verstärkter Text wird in der Regel in fetter Schrift dargestellt.	Code <strong>CozyTech</strong> Vorschau
Hervorgehoben: `<em>` Hervorgehobener Text wird in der Regel in Kursivschrift dargestellt.	Code <em>CozyTech</em> Vorschau
Ein Absatz: `<p>` Dein erstes Block-Element. Ein Absatz hat oben und Unten Abstand zum nächsten Absatz. Das "p" steht für "paragrah".	Code <p>Ein Absatz</p> <p><em>Zwei</em> Absätze</p> Vorschau
Ein Bild: `<img src="image.jpg" alt="a description">` Ein `<img>`-Tag hat kein schließendes Tag und kommt mit einem `src`- und einem `alt`-Attribut.	Code <img src="/favicon.gif"> Vorschau

Die gebräuchlichsten Tags findest du hier auf MDN.

Styles🔗

Mit dem style-Attribut kannst du das Aussehen von Elementen anpassen. Hier ein kleines Beispiel. Übrigens, falls du es noch nicht gemerkt hast: du kannst in diesem Tutorial alle Beispiele direkt bearbeiten. Die Vorschau wird sich automatisch aktualisieren. Probier' also gern direkt hier herum 😊

Code

<!DOCTYPE html>
<title>Style-Beispiel</title>
<p>
	Hallo
	<span style="
		color: white;
		background: darkorchid;
		padding-inline: 5px;
		padding-block: 2px;
		border: 1px dashed white;
	">CozyTech</span>!
</p>

Vorschau

Beim Inhalt des style-Attributs handelt es sich tatsächlich um eine andere Sprache, als HTML: nämlich CSS. Damit du die Elemente in deinem Dokument nicht immer wieder neu stylen musst, kannst du CSS auch in ein style-Tag schreiben. Dieses wird üblicherweise in den gepackt. Außerdem kannst du mit demclass`-Attribut optional eine Klasse vergeben, sodass eine Style-Regel nur auf bestimmte, von die ausgewählte Elemente angewandt wird.

Code

<!DOCTYPE html>
<html>
<head>
	<title>Style-Beispiel 2</title>
	<style>
		p {
			font-family:
				Arial,
				sans-serif;
		}
	
		span.cozy {
			color: white;
			background: darkorchid;
			padding-inline: 5px;
			padding-block: 2px;
			border: 1px dashed white;
		}
	</style>
</head>
<body><p>
	Hallo
	<span class="cozy">
		CozyTech
	</span>!
</p></body>
</html>

Vorschau

Weitere Ressourcen🔗

Das war's mit unserem HTML-Grundlagenkapitel. Aber HTML und CSS können noch sooooo viel mehr! Zum Beispiel andere Webseiten einbinden, CSS aus einer zweiten Datei abrufen, … Die Liste könnte ewig weitergeführt werden. Wenn du mehr wissen willst, schau doch bei diesen ausführlicheren Ressourcen vorbei:

SelfHTML: Wo das deutsche Web begann.
HTML Dog's beginner tutorial
neocities beginners guide (Nur mit Neocities Account)
MDN Beginner Tutorial: MDN ist der Anlaufpunkt für Dokumentation von Web-Technologien. Dies ist also ein recht "offizielles" Tutorial.

Zudem kannst du auf jeder Website mit Rechtsklick → Untersuchen schauen, wie die Website aufgebaut ist. Eine etwas einfachere aber weniger nützliche Ansicht kannst du mit Rechtsklick → Seitenquelltext anzeigen öffnen. Probier es gern einfach mal hier auf dieser Seite aus.

Hosting🔗

Alles, was du eben gesehen hast kannst du natürlich einfach in eine Textdatei auf deinem Computer speichern und diese mit dem Browser öffnen. Das ist nett zum Basteln deiner Homepage. Aber so kann sie ja niemand außer dir ansehen! was du brauchst ist ein Hosting-Angebot. Ein solches kommt in der Regel mit Speicherplatz für deine Dateien (HTML, CSS, Bilder, …), sowie einer Domain, unter der man deine Website erreichen kann.

Für den Anfang kannst du dir kostenlos einen Account bei Neocities anlegen. Dort bekommst du dann eine Domain unter dein-wunschname.neocities.org zugeteilt. Neocities kommt mit einem einfachen HTML-Editor und einem Interface zum hochladen und Verwalten von Dateien. Probier es einfach mal aus!

Die eigene Domain🔗

Sobald du möchtest, kannst du dir auch eine eigene Domain zulegen, die beispielsweise auf .de oder .com enden könnte. Dazu musst du dir einen Hoster suchen, der auch Domains anbietet, oder eine Domain bei einem Domain-Registrar beantragen und diese dann auf eine Website bei Neocities verweisen lassen. Neocities hat dazu eine Anleitung. Aber eigentlich ist es einfacher, direkt ein Gesamtpaket zu erwerben.

Wenn du für deine eigene Domain bereit bist, besuche doch mal Uberspace, JPBerlin oder Manitu. Diese Hoster haben wir ausgesucht, da sie alle eher klein sind, günstige Angebote habe und zugleich (nach eigenen Angaben) einen guten Umgang mit ihren Mitarbeitenden pflegen, sowie Open Source Software einsetzen und ihre Rechenzentren mit Ökostom betreiben.