Webseite mit wenig Aufwand erstellen
Du willst selbst eine kleine Webseite erstellen, ohne dich in ein CMS einarbeiten zu müssen, hast aber bisher keinerlei Erfahrung mit HTML oder CSS? Dann kann Pug und Sass ein Weg sein, das schnell und einfach zu ändern. Mit diesen sogenannten HTML-Präprozessoren spart man eine Menge an Zeichen ein und gewinnt Übersichtlichkeit. Dadurch hat man schnell erste Erfolge und es fällt leicht sich ein Bild vom Aufbau der Webseite zu machen.
Mittlerweile gibt es auch eine Menge an Online-Generatoren, mit denen man sich den Code mit wenigen Mausklicks automatisch erstellen lassen kann. Es ist nur wichtig zu wissen wo man diesen Code einfügen muss, um ansprechende Webseiten mit so wenig Programmierkenntnissen wie möglich zu erstellen. Hier zeige ich dir einen Weg, wie du zu einem Ergebnis kommst, indem du kostenlose Angebote aus dem Netz und vorhandene oder kostenlose Software verwendest.
Pug ist im Grunde das Gleiche wie HTML, benötigt aber weniger Zeichen und ist daher übersichtlicher und einfacher zu schreiben. Ein Textbeitrag mit einer Überschrift, einem Bild und einer Bildunterschrift würde in HTML so aussehen:
HTML Code
Das Gleiche sieht in Pug so aus.
Pug Code
h1 Dies ist die Überschrift
p Hier steht der Textbeitrag.
figure
img(src='img/Screenshot_2021-02-26 CodePen.png', width='60%', height='auto', alt='CodePen')
figcaption Dies ist die Bildunterschrift
p Hier geht es mit dem Text weiter.
Die ... Bei Pug sind die Einrückungen allerdings sehr wichtig. Wenn diese nicht eingehalten werden, fuktioniert es nicht.
Seite in Bereiche einteilen - Pug
title Meine Webseite
.grid-container
header
p Kopfzeile
nav
p Navigation
main
p Hauptinhalt
article
p Artikel
section
p Section
footer
p Fußzeile
Interaktives Beispiel
title - Der Name der Webseite
link - Ein Link zu einer CSS-Datei (Stylesheet), der zu der Datei führt, deren Speicherort mit href= xxx angegeben ist..grid-container - auf der Webseite soll ein Kontainer (der etwas enthält) vorhanden sein. Der Punkt vor container besagt das es sich hierbei um einen Klassennamen handelt. Das was unter .container steht, sind die Bereiche, die wir auf der Webseite, in diesem Kontainer (mit der Klasse “container”) zur Verfügung stellen wollen.
p (englisch: paragraph) besagt, dass hier Text steht. Der jeweilige Text steht hinter dem p, bzw. folgt nach dem p. Hier also z. B. der Text Kopfzeile im Bereich “header”, Im Bereich “main” steht der Text Hauptinhalt.- Alles markieren und kopieren
- Die Webseite codepen.io öffnen
- Links oben auf StartCoding klicken.
- Jetzt sieht man drei Fenster nebeneinander, HTML, CSS und JS (JavaScript)
HTML ist für die Struktur der Webseite, also was steht drin und wie ist der Inhalt aufgebaut.
Beispielsweise soll auf der Seite ein Text stehen. In diesem Text soll ein Bild mit Bildunterschrift enthalten sein.
CSS ist für das Aussehen der Webseite und des Inhalts zuständig.
JavaScript ist hier erstmal nicht wichtig.
- In jedem Fenster sieht man links oben, neben dem Fensternamen, ein Zahnradsymbol.
- Klicke im Fenster HTML auf dieses Symbol, ein Fenster mit den Einstellungen öffnet sich. Wähle dort bei HTML Preprocessor im Dropdown-Menü Pug aus. Schließe das Fenster mit Close.
- Füge dann im Fenster HTML die kopierten Zeilen ein.
Nun siehst du unter den drei Fenstern das Ergebnis, welches erstmal unspektakulär ist. Deine Webseite ist jetzt in sechs verschiedene Bereiche eingeteilt die der Reihe nach untereinander angeordnet sind.
Um ein etwas ansprechenderes Ergebnis zu bekommen, nutzen wir CSS (in unserem Fall die einfachere Variante davon - Sass).
- In das Fenster CSS kopierst du nun diese SASS Zeilen.
.grid-container
display: grid
grid-template-columns: 1fr
grid-template-rows: 20% 10% 2fr 10%
grid-gap: 1em
max-width: 100%
margin: auto
grid-template-areas: "header header header header" "nav nav nav nav" "main main main main" "footer footer footer footer"
header
grid-area: header
background: #0063aa
nav
grid-area: nav
background: #0063aa
main
grid-area: main
background: #0063aa
article
background-color: white
-webkit-box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.5)
box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.5)
width: 95%
margin: auto
padding: 5px
section
grid-area: section
background-color: white
-webkit-box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.5)
box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.5)
width: 90%
margin: auto
padding: 5px
footer
grid-area: footer
background: #0063aa
header, nav, main, article, section, footer
border-radius: 10px
height: auto
width: auto
text-align: center
