Workshop: HTML Grundlagen – Deine erste eigene Website
Die Beiträge der Serie im Überblick:
- Webentwicklung Teil 1 – HTML Grundlagen – Deine erste eigene Website
- Webentwicklung Teil 2 – CSS – Styling für Websites
- Webentwicklung Teil 3 – JavaScript – Interaktion im Internet
- Webentwicklung Teil 4 – WordPress als Content Management System
- Webentwicklung Teil 5 – Eigene Themes für WordPress entwickeln (noch ausstehend)
- Webentwicklung Teil 6 – Eigenes Plugin für WordPress – Custom PostType (noch ausstehend)
Das Internet ist mehr als die kleine Box, die irgendwo in nahezu jeder Wohnung zu finden ist. Unser Internet besteht aus einer Vielzahl an Dokumenten, Bildern und Informationen. Doch wie kommen diese Informationen in ein Format, was auf dem Handy und dem PC, auf Tablets und sogar der XBOX gut aussieht? Den Grundstein dafür legt eine Sprache mit dem Namen HTML.
In diesem Workshop wird Glitch als Editor verwendet. Er ist online verfügbar und ohne installation nutzbar. Außerdem bietet er die Möglichkeit die Community zu bestimmten Punkten im Code um Hilfe zu bitten.
Letz go
HTML steht für Hypertext Markup Language – das bedeutet, dass es sich um eine Beschreibungssprache für Inhalte handelt die untereinander Referenzieren. Diese Referenzen werden auch Links genannt und bilden den Beginn und das wichtigste Merkmal von Websites.
Damit unser Browser unsere Website korrekt interpretiert ist es notwendig das wir uns an ein bestimmtest Gerüst halten.
<html>
<head>
<title>Hello!</title>
</head>
<body>
</body>
</html>Dieses Gerüst besteht im wesentlichen aus dem <head></head> und dem <body></body>
Diese Bereiche sind jeweils für bestimmte Daten reserviert. Im Head stehen dabei vor allem Metainformationen. Diese Informationen helfen vor allem Suchmaschinen und Browsern dabei die Website korrekt darzustellen und die richtigen Daten zu finden. Außerdem werden hier eventuelle Abhängigkeiten zu anderen Dateien angegeben.
Im Body steht der eigentliche Inhalt der Website. Dort werden später Überschriften, Texte, Tabellen und Bilder eingebunden. Für diesen Blogeintrag gehört aller nachfolgender Code immer in den Body.
Aber wir beginnen erstmal viel einfacher. Und zwar mit einem einfachen Text. Unser erster Text sind die Worte “Hallo Welt” und diese beiden Worte wollen wir auf unserer Website stehen haben. Und alles was dazu notwendig ist, ist eine Textdatei mit den beiden Worten darin und der Dateiendung *.html oder *.htm
Code
<!-- index.html -->
Hallo WeltErgebnis
Hallo WeltSehr gut. Wir haben unsere ersteWebsite erfolgreich erstellt. Zugegeben der Informationsgehalt ist noch eher gering aber dazu kommen wir noch.
Ursprünglich dienten Websites vor allem dazu Wissen zu dokumentieren. Das Internet wie wir es kennen wurde am CERN in der Schweiz entwickelt und diente vor allem zum Austausch von Informationen und Daten über aktuelle Forschungen. Daher erinnert es in seinen Ursprüngen immer stark an ein einfaches Dokument. Und jedes gute Dokument hat auch eine Überschrift. Daher ist der erste “Tag” (gesprochen Täg oder Teg) den wir kennen lernen eine Überschrift. Allerdings müssen wir vorher noch klären, was überhaupt ein Tag ist.
Die ersten “Tags”
HTML gehört zur Familie der “Markup Languages”. Da bedeutet, dass es einigen Regeln folgen muss. Und die wichtigste Regel besagt, dass alles in Tags geordnet werden muss. Stellt euch einen Tag einfach wie eine Kiste vor. In der Kiste können beliebig viele andere Kisten verstaut sein. Außerdem kann in jeder Kiste ein Zettel – aber immer nur ein Zettel – enthalten sein. Und zusätzlich kann auf die Kiste etwas geschrieben sein.
Um das ganze zu erklären habe ich mal ein Stück “Pseudo-Code” geschrieben. Tags beginnen immer mit spitzen Klammern bzw. dem Kleiner-Als-Zeichen (<) und enden mit dem Größer-Als-Zeichen (>). Außerdem gehört zu jedem Tag immer ein Ende-Tag. Dabei steht der Tag quasi für den Deckel der Kiste und das Ende-Tag für den Boden. Alles was sich dazwischen befindet ist in der Kiste. Ein Ende-Tag ist an dem Schrägstrich ( / ) nach der öffnenden spitzen Klammer ( < ) zu erkennen. Abgesehen davon sieht er erstmal genau so aus wie sein Anfang.
Code
<tag> </tag>Ergebnis
Wenn sich in einem Tag ein anderer tag befindet (Also eine Kiste in der Kiste) bezeichnet man den inneren Tag als Kind oder Child.
Code
<tag>
<child> </child>
</tag>Ergebnis
Wenn jetzt innerhalb eines Tags (oder eines Childs) ein Text steht wird dieser als Textnode bezeichnet.
Code
<tag>
<child> textnode </child>
</tag>Ergebnis
Ein Attribut ist demnach der Zettel außen an der Kiste. Es ist eine Metainformation zu diesem Tag. Ein Attribut hat meistens einen Parameter quasi den Inhalt des Zettels. Diese Attribute dienen dazu genauere Angaben zu dem Tag zu machen. Das können z.B. Informationen über das Aussehen eines Elements sein.
Code
<tag attribute="parameter">
<child> textnode </child>
</tag>Ergebnis
Okay. Jetzt hoffe ich sind nicht alle zu verwirrt. Wenn ja bitte einfach hier klicken und aufmerksam lesen oder in den Maker Space kommen und nachfragen.
Überschriften
Nachdem das geklärt wäre beginnen wir mit unserem ersten Tag. Wie versprochen eine Überschrift. Auf Englisch heißt Überschrift “Header” entsprechend heist der Tag <h1></h1> – aber was bedeutet die 1 nach dem h?
Überschriften haben verschiedene Stufen und können untereinander geschachtelt werden. Es gibt die Stufen 1 bis 5.
Code
<h1>Unsere erste Überschrift</h1>
<h2>Subtitle</h2>
<h3>SubSubtitle</h3>
<h4>SubSubSubtitle</h4>
<h5>SubSubSubSubtitle</h5>Ergebnis
Unsere erste Überschrift
Subtitle
SubSubtitle
SubSubSubtitle
SubSubSubSubtitle
Die Überschriften werden dabei mit abnehmendem Rang immer kleiner.
Absätze
Nachdem wir das geschafft haben ist der nächste Tag schon fast einfach. Als nächstes wollen wir uns einen Absatz genauer ansehen. Der englische Begriff ist “Paragraph” – also ist der passende Tag <p></p>
Code
<h3>Eine Überschrift</h3>
<p>
Und darunter ein Absatz
</p>Ergebnis
Eine Überschrift
Und darunter ein Absatz
Hyperlinks
Eines der wichtigsten Merkmale des Internets ist die Vernetzung der Inhalte. Das können wir mit sogenannten Hyperlinks oder kurz Links erreichen. Links zeigen auf ein bestimmtes Ziel (z.B. Eine Website mit weiterführenden Informationen).
Code
<a href="/uber-den-maker-space/">Über den Maker Space</a>Ergebnis
Über den Maker SpaceDieser Link zeigt auf eine Unterseite unserer Maker Space Website. Dabei enthält der Wert des Attributes href das Ziel des Links. Der Textnode des Links ist der angezeigte und klickbare Text.
Tabellen
Und jetzt kommt noch etwas kompliziertes. Es gibt bestimmte Tags die bestimmte Childs haben müssen. Das betrifft vor allem Tabellen. Um eine Tabelle zu erstellen gibt es drei notwendige Tags und noch einige weitere die sinnvoll sind um besonders Personen mit eingeschränktem Sehvermögen zu helfen. Beginnen wir mit den drei notwendigen Tags.
Code
<table border="1">
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
</tr>
<tr>
<td>Zelle 3</td>
<td>Zelle 4</td>
</tr>
</table>Ergebnis
| Zelle 1 | Zelle 2 |
| Zelle 3 | Zelle 4 |
Der erste Tag ist <table></table> – mit ihm wird die Tabelle angelegt. Dabei habe ich das Attribut border=”1″ gesetzt um die Linien der Tabelle sichtbar zu machen.
Der Tag <tr></tr> steht für eine Reihe in der Tabelle. Dabei steht tr für “table row” also Tabellenreihe.
Eine Zelle wird mit dem Tag <td></td> dargestellt. TD ist die Abkürzung für “table data”. In diesen Tag kommen dann die Inhalte der Tabelle. Dabei muss jede einzelne Zelle der Tabelle ausgeschrieben werden. Auch wenn sie keinen Inhalt enthält.
Mehr Informationen zu Tabellen gibt es hier https://www.w3schools.com/html/html_tables.asp
Bilder
Als letzten Tag für diese Runde wollen wir uns ansehen wie Bilder eingebunden werden. Das englische Wort für Bild ist Image, entsprechend ist der Tag <img></img>
Allerdings müssen wir dem Tag sagen welches Bild. Das funktioniert mit Hilfe des Parameters src=”ulr-zum-bild”
Code
<img src="/wp-content/uploads/2020/03/iStock-832282452-scaled.jpg" width="150px" />Ergebnis
Zusätzlich zum src Parameter habe ich den Parameter width=”150px” eingefügt. Über diesen Parameter kann die Größe des Bildes gesteuert werden. PX steht dabei für Pixel.
Über den Autor
Jonathan
Ich bin joni - Festangestellt im Maker Space - kümmere mich um alle Fragen, vor allem aber Programmierung, Technik, 3D Druck, Rapid Prototyping - außerdem noch gerne in der Holzwerkstatt unterwegs. Im Maker Space findest du mich überall und nirgends. Wenn ich privat da bin sitze ich meistens an einem der Projekttische am Laptop.
