Ordnerstruktur und erste Schritte in HTML
Eine Website ist nur eine Sammlung von Dateien in einem Ordner – wenn es komplex wird, ist Struktur wichtig! Und dann ran an’s HTML.
Wiederholung
In der letzten Vorlesung haben wir uns angesehen, welche Browser es gibt, wie die Entwicklungstools in Browsern funktionieren, und welche Arten von Websites es gibt. Wir haben uns auch kurz damit beschäftigt, wie man eine Informationsarchitektur erstellt, welche Dinge es zur User Experience und Barrierefreiheit zu beachten gibt – und wir haben gesehen, dass Websites eigentlich nur große Boxen mit vielen kleinen Boxen darin sind.
Welche großen Browser gibt es?
Es gibt aktuell nur drei große Browser: Chrome, Safari und Firefox. Fast alle anderen Browser sind nur Abspaltungen von Chrome mit anderem Interface. Die drei Browser haben jeweils auch ihre eigene Rendering-Engine: Blink, WebKit und Gecko. Wenn eine Website trotz korrektem Code nicht richtig dargestellt wird, liegt es meistens an einem Fehler in einer der drei Engines. Es gibt auch leichte Unterschiede zwischen diesen Engines. Deshalb ist es wichtig, eine Website in allen drei Browsern zu testen.
Was ist das gängige Tastenkürzel zum Öffnen der Entwicklungswerkzeuge?
Die Dev-Tools könnt ihr meistens mit Strg + Shift + i auf Linux und Windows und ⌘ + Option + i auf macOS öffnen. Mit ihnen könnt ihr den Quellcode einer Website einsehen und JavaScript auf ihr ausführen. Das ist eine super Möglichkeit, um sich Tricks von anderen Websites abzuschauen, oder Probleme auf eurer eigenen Seite zu beheben.
Welche gängigen Arten von Websites gibt es?
Man unterscheidet im Wesentlichen zwischen One-Pagern, also Websites, die aus einem einzigen HTML-Dokument bestehen, und Multi-Page-Websites, die aus mehreren Dokumenten bestehen. Erstere werden mit vielen Inhalten schnell unübersichtlich, auch wenn sie im ersten Moment leichter und schneller zu erstellen sind. Für ein Portfolio, bei dem Arbeiten auch für sich betrachtet werden können sollen, ist eine Multi-Page-Website besser geeignet.
Was sind die wichtigsten Merkmale für eine akzeptable UX?
Keine Schrift kleiner als 16px, genug Kontrast zwischen Vorder- und Hintergrund, immer mehr als ein Hervorhebungsmerkmal, und: Was klickbar aussieht, sollte auch klickbar sein!
User Experience und User Interface sind eng miteinander verzahnt, aber definitiv nicht das Gleiche. Die UX ist genauso wichtig, wie die Gestaltung einer Website.
Was ist der Unterschied zwischen Inline- und Block-Elementen?
Inline-Elemente stehen in der Zeile mit dem Text und brechen um, wenn es nicht genug Platz für sie gibt. Block-Elemente bilden immer eine eigene Zeile, weil sie ihr Elternelement (also die umschließende Box) immer zu 100% ausfüllen. Überschriften, Textabsätze und Struktur-Elemente sind typische Block-Elemente, während gefetteter, oder kursiver Text sowie Links klassische Inline-Elemente darstellen.
Die Ordnerstruktur einer Website
Eine Website ist eine Sammlung von HTML-Dokumenten auf einem Server – da aber auf einem Server oft mehr liegt als eine Website, wäre es vermutlich besser zu sagen: „Eine Website ist eine Sammlung von HTML-Dokumenten in einem Ordner auf einem Server.“
Ihr seid prinzipiell frei in der Organisation eurer Dateien, mit ein paar wenigen Ausnahmen und Richtlinien, an die ihr euch halten solltet. Trotzdem habe ich euch hier eine gängige Konvention zusammengestellt, wie ich persönlich und andere Entwickelnde die Dateien ihrer Websites strukturieren. Dieser Konvention folgt auch der Ordner, den ihr erhaltet, wenn ihr ein Projekt aus Quadrants herunterladet – er kann euch also als Grundlage dienen.
Der „Root“-Ordner
Alles fängt mit dem Ordner an, in dem eure Website lebt. Dieser wird auch als „Root“ oder „Wurzel“-Ordner bezeichnet, weil er die Basis für alle Pfade innerhalb eurer Website darstellt. Hier befinden sich alle Seiten aus der obersten Ebene eurer Informationsarchitektur, also zum Beispiel die Startseite, eine About-Seite oder auch das Impressum und die Datenschutzerklärung.
Für Seiten in tieferen Ebenen, legt ihr neue Ordner an und platziert die HTML-Dokumente für diese Seiten darin. Also zum Beispiel einen Ordner „projects“ mit HTML-Dokumenten für eure Projekte. Hier kann man schon die erste Nähe zur URL-Leiste im Browser erkennen: Die Datei „project-1.html“ im „projects“-Ordner ist unter dem Pfad „/projects/project-1.html“ zu finden.
Weitere Ordner im Wurzelordner sind „images“ und „assets“ für die Bildinhalte auf der Website und weitere Assets wie Schriften, CSS-Dateien und Skripte. Ihr könnt diese Ordner natürlich frei benennen, die hier gezeigten Namen sind nur Konventionen. Beachtet bei der Erstellung von Unterordnern und Dateien aber, dass die Namen keine Leer- und Sonderzeichen beinhalten. Es bietet sich also an, vor allem auf englische Namen zu setzen.
Sonderfall: index.html
Es gibt einige Dateien, denen eine besondere Funktion zugedacht ist, aber die einzige, die für euch vorerst relevant ist, ist die index.html (in exakt dieser Schreibweise). Diese Datei ist die „Startseite“ eines (Unter-)Ordners.
Wenn ein Browser einen Pfad wie „example.com/about/“ anfrägt, liefert der Server die Datei „/about/index.html“ aus, sofern sie existiert. Dadurch lassen sich „schöne“ URLs wie „example.com/“ oder „example.com/projekte/tolles-projekt/“ erstellen, ohne, dass immer eine Datei wie „about.html“ oder „tolles-projekt.html“ in der URL vorhanden sein muss.
Im Umkehrschluss bedeutet das auch, dass die Startseite eurer Website, also das, was erscheinen soll, wenn jemand eure Domain im Browser eingibt, die Datei „index.html“ im Wurzelordner eurer Website sein muss.
Anatomie eines HTML-Dokuments
Jedes HTML-Dokument (und damit jede Website) folgt einem einheitlichen Aufbau. Sie bestehen aus einem „Doctype“, der die Art des Dokuments angibt. Bei modernen Websites ist das immer „html“, gefolgt von der äußersten „Box“ unserer Website, dem <html>-Element. Darin dürfen sich nur zwei weitere Elemente befinden: das Head- und das Body-Element.
Diese grundlegende Struktur lässt sich in vielen Editoren mit einem schnellen Snippet einfügen, in den meisten Fällen „html“ oder „!!!“. In Quadrants fügt das System es vollautomatisch hinzu, sodass ihr nur die Inhalte des „Body“-Anschnitts bearbeiten müsst. Falls ihr auch im „Head“-Abschnitt etwas verändern möchtet, könnt ihr in den Quadrant-Einstellungen (Klick auf den Namen) unter „HTML Template“ ein eigenes HTML-Template hinterlegen – probiert es aus!
Das „<head>“-Element
Der <head>-Abschnitt eines HTML-Dokuments ist im Browser nicht sichtbar, er enthält lediglich Metadaten über das HTML-Dokument, z.B. den Autor und eine Zusammenfassung der Inhalte. Diese Daten sind für Suchmaschinenoptimierung (SEO) relevant.
Auch können hier funktionale Meta-Tags hinterlegt werden, die z.B. die Skalierung auf verschiedenen Bildschirmen oder die Darstellung in Link-Vorschauen bestimmen. Zu guter Letzt werden im „Head“-Abschnitt auch externe Ressourcen wie CSS-Stylesheets, Favicons und teilweise auch Skripte verlinkt bzw. importiert.
<head>
<meta charset="UTF-8">
<!-- Das "viewport" Meta-Tag ist essentiell für die richtige Skalierung auf Mobilgeräten! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Zusammenfassung des Inhalts">
<meta name="author" content="Amadeus Maximilan Stadler">
<title>Titel des Dokuments</title>
<link rel="stylesheet" href="./assets/styles/base.css">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
</head>
Das Viewport-Meta-Tag
Ein besonders wichtiges Meta-Tag im „Head“-Bereich einer Website ist das <meta name="viewport">-Tag. Es sorgt dafür, dass der Browser eure Website auch auf hochauflösenden Displays wie bei Smartphones darstellen kann. Bei diesen Geräten ist die „reale“ Auflösung meist deutlich höher als die dargestellte Auflösung. So hat ein Display beispielsweise eine reale Auflösung von 1080 Pixeln in der Breite, das Betriebssystem stellt Inhalte aber in einer virtuellen Auflösung von 360 Pixeln in der Breite dar, damit sie auf dem vergleichsweise kleinen Display lesbar bleiben. Drei reale Pixel werden also zu einem virtuellen Pixel zusammengefasst.
Die typische Einstellung content="width=device-width, initial-scale=1.0" sorgt dafür, dass eure Website diese Darstellungsform übernimmt. Sie besagt, dass die Breite eures HTML-Dokuments der Gerätebreite (also virtuellen Auflösung) entsprechen und das anfängliche Zoom-Level bei 1,0 (also keinem Zoom) liegen soll.
Weitere Informationen zum Viewport-Meta-Tag könnt ihr hier im Mozilla Developer Network nachlesen.
Exkurs: Favicons
„Favicons“ sind die kleinen Icons, die in der Lesezeichenleiste und in den Tabs eures Browsers angezeigt werden. Ursprünglich gab es hier nur eine einzelne „favicon.ico“-Datei im Wurzelverzeichnis eurer Website, aber heutzutage können diese Icons auch als App-Icons für Websites, die zu eurem Home-Screen hinzugefügt wurden, fungieren und unterstützen über Umwege sogar den Light- bzw. Dark-Modus des Browsers.
Aus diesem Grund werden inzwischen eine Vielzahl verschiedener Grafiken in unterschiedlichen Größen und Formaten benötigt, um alles „richtig“ zu machen. Verwendet dazu also am besten einen Generator wie das Favicon-Tool in der inBrowser.app, die euch auch gleich den passenden Code für euer <head>-Element liefern.
Das „<body>“-Element
Der <body>-Abschnitt eines HTML-Dokuments enthält den sichtbaren Inhalt einer Website. Hier werdet ihr also die meiste Zeit verbringen. So wie es in einem HTML-Dokument nur einen Head-Abschnitt geben kann, kann es auch nur einen Body-Abschnitt geben – und der Body-Abschnitt muss der zweite und letzte Abschnitt innerhalb eines HTML-Elements sein.
Innerhalb dieses Abschnitts beschreibt ihr die Struktur eurer Seite und hinterlegt alle Informationen, die später für Besucherinnen und Besucher sichtbar sein sollen.
<body>
<h1>Hello World!</h1>
<p>
Das hier ist nur ein kleiner <strong>Einleitungstext</strong> zu Beispielzwecken, um das Konzept des DOM verständlicher zu machen.
</p>
<ul>
<li>Erstes Listenelement</li>
<li>Zweites Listenelement</li>
</ul>
</body>
HTML-Tags und ihre Attribute
HTML-Elemente wie HTML, Head und Body bestehen in der Regel aus einem öffnenden und einem schließenden Tag, die den Inhalt des Elements umgeben. Um zur Analogie der Boxen zurückzukehren: Ein HTML-Element ist eine Box. Die Tags legen fest, um welche Art von Box es sich handelt und wo sie beginnt und endet.
Tags werden immer in spitzen Klammern (<>) geschrieben. Der Unterschied zwischen einem öffnenden und einem schließenden Tag ist, dass im schließenden Tag vor dem Namen des HTML-Elements ein Slash (/) steht.
<html> ist also ein öffnendes Tag für ein „HTML“-Element, </html> ist das dazugehörige schließende Tag. Damit außerdem klar ist, wo der Inhalt eines Elements beginnt und endet, wird dieser außerdem mit zwei oder vier Leerzeichen eingerückt. Theoretisch ist das nicht zwingend nötig, eine Website kann auch in einer einzigen Zeile geschrieben sein, aber das ist nicht besonders les- oder wartbar.
Attribute
Öffnende Tags können zusätzlich zum Namen des Elements noch sogenannte Attribute beinhalten. Das sind zusätzliche Informationen für das Element, z.B. die Sprache des Inhalts, die mit dem „lang“-Attribut festgelegt wird: <html lang="de"> – wichtig hierbei ist, dass die Attribute nur im öffnenden Tag vorkommen.
Attribute teilen sich in Namen und Wert, getrennt durch ein „=“-Zeichen. In unserem Beispiel ist also „lang“ der Name des Attributs und „de“ sein Wert. Der Wert muss hierbei in Anführungszeichen stehen, für gewöhnlich in doppelten Anführungszeichen (").
Es gibt viele verschiedene Attribute, die teils auf alle Elemente angewandt werden können, teils für bestimmte Elemente spezifisch sind. Ihr müsst das nicht alles auswendig lernen. Stattdessen könnt ihr Referenzen verwenden, wie das Mozilla Developer Network, oder noch besser ein Tool wie DevDocs, in dem ihr schnell nach einem Element suchen und die dafür gültigen Attribute sehen könnt.
Wir werden einige der wichtigsten globalen Attribute im weiteren Verlauf des Kurses kennenlernen. Beschäftigt euch mit dem Rest am besten erst, wenn ihr ihn einmal benötigen solltet.
Selbst-Schließende Tags
Es gibt ein paar HTML-Elemente, die nur aus einem öffnenden Tag bestehen, z.B. die <meta>-Elemente aus dem Head-Bereich. Diese Tags nennt man auch „selbstschließende Tags“, da sie keinen Inhalt unterstützen. Manchmal werden sie auch als „Void-Elements“ bezeichnet, eben, weil sie immer leer sind.
Manche Menschen verwenden einen Slash vor der schließenden spitzen Klammer in einem selbstschließenden Tag, um klarzustellen, dass es sich um ein Void-Element handelt. Beispielsweise würde man dann <meta name="author" content="Amadeus" /> schreiben, aber da man dieses explizite Schließen nur in XML-Kontexten braucht, könnt ihr euch das auch gerne sparen.
Häufige HTML-Elemente (Teil 1)
Es gibt eine Unmenge von verschiedenen HTML-Elementen für allerhand verschiedene Zwecke, deutlich mehr, als ihr für eure Websites braucht. Deshalb werde ich euch in diesem Kurs nur einige der wichtigsten und für euch relevantesten Elemente vorstellen. In diesem ersten Schwung beschäftigen wir uns mit verschiedenen Formen von Text-Elementen, die wir teilweise bereits in Beispielen gesehen haben.
Paragraphen / Absätze
Den meisten Fließtext auf euren Websites werdet ihr innerhalb von Textabsätzen (Paragraphen) schreiben. Dafür verwendet man das <p>-Element („p“ für „paragraph“). Für Textformatierungen innerhalb eines Absatzes könnt ihr folgende Inline-Elemente verwenden:
<strong>für Fettungen<em>(kurz für „emphasis“) für kursiven Text<s>(kurz für „strike“) für durchgestrichenen Text<mark>für hervorgehobenen Text
Wichtig: Wir beschreiben mit HTML die Struktur der Information, nicht das Aussehen. Deshalb verwenden wir <strong> und <em> und nicht <b> (bold) und <i> (italic) – wir geben an, dass ein Text „laut“ oder „mit Betonung“ gelesen werden soll, was grafisch typischerweise über Fettungen und kursiven Text ausgedrückt wird. Das ist Teil des Konzepts von semantischem HTML, mehr dazu später.
Überschriften
Es gibt in HTML sechs Abstufungen von Überschriften (headings), von der <h1> bis zur <h6>. Das bedeutet nicht, dass eure Website nur maximal sechs Überschriften beinhalten darf, sondern, dass es maximal sechs Kontext-Ebenen in einem Dokument gibt. Meistens reichen euch die Überschriften <h1> bis <h3>.
Diese Kontext-Ebenen könnt ihr auch an diesem Skript erkennen:
Die
<h1>ist der Name des Blocks, in diesem Fall „03: Ordnerstruktur und erste Schritte in HTML“Die
<h2>repräsentieren die verschiedenen Kapitel dieses Skripts, also z.B. das aktuelle Kapitel „Häufige HTML-Elemente (Teil 1)“Die
<h3>sind Unterpunkte innerhalb des Kapitels, also z.B. dieser Unterpunkt „Überschriften“Und so weiter bis
<h6>
Es kann folglich immer nur eine <h1> (Hauptüberschrift) pro HTML-Dokument geben, aber so viele <h2>, <h3>, etc. wie ihr benötigt.
<h1>H1: Ich bin die Hauptüberschrift</h1>
<h2>H2: Ich bin eine Unterüberschrift von H1</h2>
<h3>H3: Ich bin eine Unterüberschrift von H2</h3>
<h4>H4: Ich bin eine Unterüberschrift von H3</h4>
<h5>H5: Ich bin eine Unterüberschrift von H4</h5>
<h6>H6: Ich bin eine Unterüberschrift von H5</h6>
<h2>H2: Ich bin die zweite Unterüberschrift von H1</h2>
Die verschiedenen Überschriften-Ebenen dienen dazu, Inhalte semantisch miteinander zu gruppieren, achtet also bitte darauf, keine Ebenen zu überspringen (also z.B. von <h2> direkt auf <h4>). Unterschiedliche Abschnitte sollten auch immer ihre jeweils eigene Überschrift besitzen, um sie von anderen Abschnitten abzugrenzen.
Ihr seht im Beispiel auch, wie der Text immer kleiner wird, je tiefer man in der Hierarchie landet – lasst euch davon nicht verführen, die verschiedenen Ebenen für verschiedene Größen zu verwenden. Das ist reine Darstellung und hat mit HTML nichts zu tun. In der Theorie könnt ihr eine H6 größer aussehen lassen als eine H1, auch wenn ihr das in der Praxis eher lassen solltet.
Zitate
Es wird einen Zeitpunkt geben, an dem ihr die Meinung einer anderen Person – oder zumindest etwas, das sie gesagt hat – auf eurer Website darstellen möchtet. Zum Beispiel ein Testimonial, oder ein positives Feedback, das ihr erhalten habt.
Dafür könnt ihr das <blockquote>-Element verwenden, das für Zitate steht. Innerhalb des Elements verwendet ihr dann <p>-Elemente für den eigentlichen Textinhalt, sowie ein (optionales) abschließendes <footer>-Element für die zitierte Person und das zitierte Werk. Letzteres könnt ihr sogar noch in ein <cite>-Element stecken, wenn ihr ganz genau arbeiten möchtet, aber in der Praxis wird das selten getan.
<p>Normaler Text.</p>
<blockquote>
<p>
Words can be like X-rays, if you use them properly—they’ll go through
anything. You read and you’re pierced.
</p>
<footer>
<p>—Aldous Huxley, <cite>Brave New World</cite></p>
</footer>
</blockquote>
<p>Mehr normaler Text.</p>
Listen
Beim Schreiben von Websites fällt mir immer wieder auf, wie viel wir eigentlich unbewusst in Listen stecken. Navigationslinks im Seitenmenü? Eine Liste. Teaser für Arbeiten? Eine Liste. Inhaltsverzeichnis? Liste.
Gut, dass es in HTML sogar zwei Arten von Listen gibt: geordnete („ordered“) und ungeordnete („unordered“). Die passenden Tags dafür sind <ol> und <ul>. Der wesentliche Unterschied zwischen diesen beiden Listenarten liegt in ihrer Semantik. Geordnete Listen werden für Listen verwendet, in denen die Reihenfolge der Elemente eine wichtige Rolle spielt, z.B. die Punkte in einem Inhaltsverzeichnis. Wenn die Reihenfolge nicht wichtig ist, z.B. bei einer Liste von Einkäufen, werden ungeordnete Listen verwendet.
Visuell äußert sich das an den Symbolen, die den Listenelementen vorangestellt werden. Bei geordneten Listen ist es eine aufsteigende Nummerierung (1., 2., 3., etc.), bei ungeordneten Listen sind es einfache Bullets. Beides kann natürlich mit CSS angepasst werden.
Um einzelne Listenelemente zu erstellen, wird das <li>-Element verwendet („list item“). Ihr könnt auch Listen mit Unterpunkten erstellen, indem ihr innerhalb eines <li>-Elements wiederum ein <ol>- oder <ul>-Element verwendet. Probiert im Beispiel doch mal aus, ob man auch ungeordnete innerhalb von geordneten Listen schachteln kann!
<ul>
<li>Ich bin ein ungeordnetes Listenelement</li>
<li>Und hier noch eins!</li>
<li>
Ich habe eine Unterliste
<ul>
<li>Ich bin ein verschachteltes Listenelement</li>
</ul>
</li>
<li>Und ich bin wieder auf der obersten Ebene!</li>
</ul>
<ol>
<li>Erster Punkt</li>
<li>
Zweiter Punkt
<ol>
<li>Erster Unterpunkt</li>
</ol>
</li>
<li>Dritter Punkt</li>
</ol>
Kommentare
Es ist sehr wichtig, beim Schreiben von Quellcode darauf zu achten, dass man ihn auch dann noch versteht, wenn er ein paar Wochen geruht hat. Deshalb hinterlassen Entwickelnde oft Kommentare in ihrem Code, die diesen ihren Zukunft-Ichs oder Teammitgliedern erklären. Gerade am Anfang eurer Reise würde ich euch empfehlen, viele Kommentare zu setzen, einerseits, um euch Notizen zu euren Entscheidungen zu machen, andererseits, um die Übersicht in eurem Code zu wahren.
Kommentare sind auf eurer Website später nicht sichtbar, sie dienen lediglich der Dokumentation. In HTML gibt es dafür kein eigenes Element, stattdessen verwendet man das besondere <!-- -->-Tag. Der Text zwischen dem Anfang und dem Ende des Tags wird vom Browser komplett ignoriert.
Dadurch eignen sich Kommentare auch sehr gut, um bestimmte Elemente schnell „an“ und „aus“ zu schalten, während ihr entwickelt, ohne sie aus eurem Quellcode löschen zu müssen. In Quadrants könnt ihr die entsprechenden Bereiche eures Quellcodes einfach auswählen und mit Strg + # auf Linux und Windows, oder ⌘ + # auf macOS ein- oder auskommentieren.
<!--
Ich bin ein Kommentar!
Mein Inhalt wird auf der Seite nicht angezeigt
-->
<!-- <h1>Auskommentiertes Element</h1> -->
Semantisches HTML
Ihr habt jetzt schon einige HTML-Elemente kennengelernt, die alle mehr oder weniger das Gleiche tun: Text auf eine Seite bringen. Browser sind sehr nett, sie lassen einen im Endeffekt beinahe jedes Element in beliebiger Reihenfolge auf eine Seite bringen – und dank CSS könnt ihr es auch aussehen lassen, wie ihr wollt!
Aber wir sollten stets im Hinterkopf behalten, dass HTML eine Sprache zur Strukturierung von Dokumenten ist. Gerade für Menschen, die eure Websites nicht mit ihren Augen konsumieren, sondern sie z.B. von einem Screenreader vorgelesen bekommen, ist es wichtig, dass die verwendeten HTML-Elemente auch zur Struktur der Seite passen. Wenn etwas eine Überschrift darstellt, sollte es auch ein Überschriften-Element verwenden.
Diese Informationen sind auch für Suchmaschinen sehr wichtig, die eure Websites nicht wie ein Mensch betrachten, sondern sich von der Semantik des HTML-Codes leiten lassen, um Informationen zu extrahieren. Stellt euch also immer die Frage: „Welches HTML-Element beschreibt die Daten, die ich darstellen möchte, am besten?“ und versucht, immer das richtige HTML-Element für einen bestimmten Zweck zu verwenden, z.B. <p> für Absätze, <h1 – 6> für Überschriften, <article> für Artikel, etc.
Bitte versucht auch nicht, <table>-Elemente für eure Layouts zu verwenden, auch wenn es auf den ersten Blick so wirkt, als könne man damit gut Raster erstellen. Diese Elemente sind nur für Daten-Tabellen gedacht, das Layout hat in HTML nichts verloren. 😉
Ich weiß, das sind eine Menge Regeln für jemanden, der gerade erst anfängt. Lasst euch bitte nicht davon lähmen – wie gesagt, die Browser sind nett und lassen euch vieles durchgehen. Wenn ihr euch nicht sicher seid, welches Element ihr nehmen sollt, nehmt das Nächstbeste und verbessert es im Nachhinein.
Praxis
Ihr kennt jetzt genug HTML-Elemente, um eine kleine Website zu bauen! Versucht, ein eigenes HTML-Template in Quadrants zu verwenden, um ein HTML-Element anzulegen, bei dem die Inhaltssprache auf Deutsch festgelegt ist.
Danach könnt ihr versuchen, den „Über mich“-Teil eurer Websites zu schreiben. Hier könntet ihr z.B. mit einem Listen-Element eure Stärken oder Lieblingsprogramme aufzählen. Das bildet die Grundlage für die Praxisaufgabe nächste Woche, wenn ihr lernt, wie man Bilder und Links einfügt.
Das muss natürlich nicht der finale „Über mich“-Abschnitt eurer Website werden. Wichtig ist vor allem, dass ihr anfangt, ein Gefühl dafür zu entwickeln, wie man HTML-Code schreibt, und die verschiedenen Elemente zu verinnerlichen, die wir heute kennengelernt haben!