In dieser Lektion geht es um den Aufbau der README-Datei und Gestaltungsmöglichkeiten dieser. Die README-Datei enthält die Textbausteine der Website. Hier können Sie also sowohl den Inhalt Ihrer Website verändern, als auch die Darstellungsweise.
Schritt 1: Zugriff auf das Repository
-
Melden Sie sich bei Ihrem GitHub-Konto an, wenn Sie dies noch nicht getan haben.
-
Navigieren Sie zur Hauptseite des Repositorys, in dem sich die README-Datei befindet, die Sie aktualisieren möchten.
Schritt 2: README-Datei finden und bearbeiten
Klicken Sie auf den Dateinamen "README.md" in der Repository-Übersicht. Dies öffnet die README-Datei im GitHub-Texteditor.
Klicken Sie auf das Stiftsymbol (Edit this file), um den Editor zu öffnen, mit dem Sie die Datei bearbeiten können.
Schritt 3: Bearbeiten und Aktualisieren
-
Der GitHub-Editor zeigt Ihnen den Inhalt der README.md-Datei an. Bearbeiten Sie den Text, fügen Sie neue Informationen hinzu oder ändern Sie den bestehenden Text, um die README zu aktualisieren.
-
Um die Bearbeitung der Inhalte auszuprobieren, finden Sie hier einige häufig verwendete Markdown-Elemente, mit denen Sie Inhalte einfügen und gestalten können:
- Überschriften:
#für Überschriften erster Ebene,##für Überschriften zweiter Ebene usw. - Links:
[Linktext](URL) - Bilder:
 Hinweis: Alt-Text ist Bildbeschreibung o.ä.? Ich wusste auf Anhieb nicht, was das heißt - Listen: Verwenden Sie
*oder1.für ungeordnete bzw. geordnete Listen. - Fett:
**Text** - Kursiv:
*Text*
|
Hinweis: Einen Überblick über die wichtigste Markdown-Syntax finden Sie hier:
|
|---|
Markdown ist besonders nützlich für schnelles Schreiben von Texten, insbesondere für Dokumentationen, Readme-Dateien, Forenbeiträge usw. Alternativ gibt es die Möglichkeit, die Auszeichnungssprache HTML zu verwenden. HTML bietet eine größere Flexibilität und Kontrolle über die Darstellung und wird verwendet, um strukturierte Webseiten und Anwendungen zu erstellen.
Neben der Arbeit mit GitHub-Flavored Markdown bieten also HTML-Tags Gestaltungsspielräume für Ihren Text. Im Folgenden finden Sie dafür einige Beispiele. Ausführlichere Erklärungen über HTML folgen außerdem in dem Abschnitt "Website anpassen (HTML).
Die Textausrichtung verändern
In einer README-Datei auf GitHub können Sie Text in der Mitte des Dokuments ausrichten, indem Sie HTML-Tags für die Textausrichtung verwenden. Mit diesem Code können Sie Text in der Mitte einer README.md-Datei platzieren:
|
|---|
Das
<p>-Tag steht für Absatz (Paragraph), und align="center" gibt an, dass der Text in der Mitte ausgerichtet werden soll.| <center> Text/ Oder Paragraph </center> |
|---|
 |
|---|
 |
Textformatierung und -farben ändern:
Wenn Sie eine umfangreichere Textformatierung, einschließlich Textfarben, in Ihrer README-Datei wünschen, können Sie ebenfalls HTML-Tags verwenden. Beachten Sie jedoch, dass GitHub bestimmte HTML-Elemente und -Attribute aus Sicherheitsgründen in README-Dateien entfernt oder deaktiviert. Das bedeutet, dass nicht alle HTML-Stile und -Formatierungen in GitHub-READMEs funktionieren.
Hier ist ein einfaches Beispiel, wie Sie die Textfarbe mit HTML-Code ändern können:
| <span style="color: red;">Dies ist roter Text</span> |
|---|
 |
|---|
 |
Titel und Unterüberschriften hinzufügen:
Oben haben wir bereits gelernt, dass Titel ganz einfach erstellt werden können, indem der Text mit einem oder mehreren #-Zeichen am Anfang der Zeile versehen werden. Je mehr #-Zeichen Sie verwenden, desto kleiner wird der Titel. Bei HTML ist H1 die größte Überschrift, während H6 die kleinste ist. Ein Titel in Markdown wird normalerweise in HTML als <h1>, <h2>, <h3>, usw. gerendert.
 |
|---|
 |
Eine Infobox erstellen:
Eine Infobox in HTML kann auf verschiedene Arten erstellt werden, abhängig von den spezifischen Anforderungen und dem gewünschten Erscheinungsbild. Im Allgemeinen können Sie jedoch eine Infobox erstellen, indem Sie HTML-Elemente wie
<div>, <span>, <p> und CSS-Stile verwenden, um das gewünschte Aussehen zu definieren. Hier ist ein Beispiel für eine einfache Infobox:
| <div class="infobox"> <h2>Infobox-Titel</h2> <p>Dies ist der Text in Ihrer Infobox. Sie können beliebige Informationen hier einfügen.</p> </div> |
|---|
<head>-Bereich Ihrer HTML-Datei ein oder verknüpfen Sie eine externe CSS-Datei. Hier ist ein Beispiel für einige grundlegende CSS-Stile, um die Infobox zu gestalten:| <style> .infobox { border: 1px solid #000; padding: 10px; background-color: #f0f0f0; width: 300px; margin: 20px; } h2 { font-size: 20px; color: #333; } p { font-size: 16px; color: #666; } </style> |
|---|
Verknüpfen Sie die CSS-Datei (optional): Wenn Sie die CSS-Regeln in einer separaten Datei speichern, können Sie diese mit dem
<link>-Element in Ihrer HTML-Datei verknüpfen:| <link rel="stylesheet" type="text/css" href="infobox.css"> |
|---|
 |
|---|
 |
 |
Icons einfügen:
Font Awesome ist eine beliebte Bibliothek von skalierbaren Vektor-Icons, die Sie in Ihrer HTML-Website oder Webanwendung verwenden können. Hier ist eine Schritt-für-Schritt-Anleitung, wie Sie Font Awesome-Icons in HTML nutzen können:
1. Font Awesome einbinden: Zuerst müssen Sie die Font Awesome-Bibliothek in Ihre Webseite einbinden. Sie können dies auf verschiedene Arten tun:
- CDN (Content Delivery Network): Die einfachste Methode besteht darin, die Font Awesome-Skripte von einem CDN in Ihre HTML-Datei einzufügen. Fügen Sie den folgenden Code in den
<head>-Bereich Ihrer HTML-Datei (index.HTML) ein:
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
|---|
Beachten Sie, dass die genaue URL abhängig von der Version von Font Awesome sein kann. Stellen Sie sicher, dass Sie die neueste Version verwenden.
- Lokale Installation: Sie können Font Awesome auch lokal installieren, indem Sie die CSS- und Font-Dateien von der offiziellen Font Awesome-Website herunterladen und in Ihr Projektverzeichnis kopieren.
<i>- oder <span>-Elementen in Ihrem HTML-Code einfügen. Verwenden Sie die entsprechende CSS-Klasse, um das gewünschte Icon anzuzeigen. Die CSS-Klassen beginnen normalerweise mit "fa-" oder "fas-" für fest positionierte Icons. 3. Größe und Farbe anpassen (optional): Sie können die Größe und Farbe der Icons mithilfe von Font Awesome-Klassen anpassen. Hier sind einige Beispiele:
- Größe ändern: Verwenden Sie die Klassen
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, usw., um die Größe des Icons anzupassen.- Farbe ändern: Verwenden Sie die Klasse
text-primary, text-danger, text-success, usw., um die Farbe des Icons anzupassen.4. Weitere Anpassungen (optional): Sie können weitere Anpassungen an den Icons vornehmen, wie das Hinzufügen von Animationen oder das Kombinieren von Icons. Die Font Awesome-Dokumentation bietet ausführliche Informationen dazu.
 |
|---|
 |
Eine Warningbox einfügen:
Dafür können Sie den folgenden Code kopieren:
| <div class="warningbox"> <p><i class="fa fa-exclamation-triangle" style="color:black"></i> <b>Wichtig!</b> <br><br> text text </p> </div> |
|---|
 |
|---|
 |
Eine ausklappbare Infobox einfügen: In Markdown können Sie klappbare Infoboxen mithilfe von HTML und JavaScript erstellen. Hier finden Sie ein einfaches Beispiel:
|
|---|
 |
|---|
 |
Für umfassendere klappbare Elemente können Sie folgenden Code nutzen:
-
<style>
details {
border: 1px solid #ddd;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #eee;
color: #333;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
summary {
cursor: pointer;
}
</style>
<details>
<summary>Bereich 1</summary>
Inhalt des Bereichs 1.
</details>
| Hinweis: Einen Überblick über die wichtigste HTML-Tags finden Sie hier: Dort können Sie Befehle herauskopieren und in Ihre Dokumente einfügen. |
|---|
Schritt 4: Commit der Änderungen
1. Nachdem Sie Ihre Änderungen vorgenommen haben, scrollen Sie nach oben/ unten, um zum Abschnitt "Commit changes" (Änderungen übernehmen) zu gelangen.
2. Geben Sie eine kurze Beschreibung der vorgenommenen Änderungen in das Textfeld "Update README.md" ein. Diese Beschreibung hilft anderen Benutzer:innen zu verstehen, was Sie geändert haben.
3. Optional können Sie eine längere Beschreibung Ihrer Änderungen in das darunterliegende Textfeld eingeben.
4. Stellen Sie sicher, dass die Option "Commit directly to the main branch" (Direkt in den Hauptzweig committen) aktiviert ist, es sei denn, Sie haben spezifische Gründe, in einen anderen Zweig zu committen.
5. Klicken Sie auf die grüne Schaltfläche "Commit changes" (Änderungen übernehmen), um Ihre Änderungen in der README-Datei zu speichern
Die gespeicherten Änderungen können Sie jetzt unter "Blame" nachverfolgen.