This is a list of baking ingredients for a bread:
- Flour
- Water
- Yeast
- Sugar
- Salt
- Oil
Baking
Preparation
Make the Bread...
Websites programmieren
Um eine Webseite zu programmieren, braucht es verschiedene Teile, die zusammenarbeiten. Dabei werden Inhalte aufgebaut, das Aussehen gestaltet und Funktionen eingebaut, damit die Webseite richtig funktioniert. Erst durch das Zusammenspiel dieser verschiedenen Bereiche entsteht eine moderne Webseite, die auf Computern, Tablets und Smartphones angezeigt werden kann.
HTML
Struktur einer Website
HTML ist die Grundsprache jeder Webseite und bestimmt den Aufbau und Inhalt einer Seite. Mit HTML werden Elemente wie Überschriften, Texte, Bilder, Links, Tabellen oder Formulare erstellt. Es arbeitet mit sogenannten Tags, die dem Browser sagen, wie Inhalte strukturiert werden sollen.
Grundstruktur
Jedes HTML-Dokument folgt einer einfachen Struktur.
Es beginnt mit <!DOCTYPE html>, was die HTML-Version angibt, die wir verwenden.
Darauf folgt der <html>-Tag mit seinem schliessenden Tag </html>, der den gesamten HTML-Inhalt enthält.
Innerhalb des <html>-Tags fügen wir den <head>und den </head>-Tag hinzu, in dem alle CSS-Dateilinks/JavaScript-Dateilinks und weitere Dinge drin sind.
Auch innerhalb des <html>-Tags fügen wir den <body>-Tag mit seinem zugehörigen schliessenden Tagn hinzu, der den gesamten sichtbaren Inhalt der Webseite enthält.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
This is some text.
</body>
</html>
This is some text.
In diesem Beispiel wird der Text innerhalb des <body>-Tags als Text auf der Webseite angezeigt.
Text-Tags
Es gibt sechs Arten von Überschriften (<h1> bis <h6>) bei denen <h1> die grösste und <h6> die kleinste ist. Jede Überschrift hat eine festgelegte Schrift-Grösse und Schrift-Stärke.
Zwischen dem Tag <p> und dem schliessenden Tag </p> kann man Text eines Paragraphen einfügen. Ein Paragraph hat ein Standard-Margin.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<h1>This is a title!</h1>
<h2>This is a subtitle!</h2>
<p>This is a paragraph!</p>
</body>
</html>
This is a title!
This is a subtitle!
This is a paragraph!
Hier sieht man den Code für einen Titel, einen Untertitel und einen Paragraphen.
Kommentare
Zwischen die Symbole <!-- und --> kann man seine Kommentare in den Code einfügen, diese sieht man nur im Code.
Kommentare sieht man auf der eigentlichen Website nicht. Sie sind dazu da, den Code zu erklären oder für den Coder Erinnerungen einzutragen.
Diese Funktion kann man auch benutzen, um Teile des Codes "auszuschalten" ohne ihn zu löschen. Dies nennt man "auskommentieren".
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<!--This is a comment-->
<p>This is a Paragraph!</p>
</body>
</html>
This is a Paragraph!
Hier sieht man einen Paragraphen der auf der Website sichtbar ist und einen Kommentar der auf der eigentlichen Website nicht sichtbar ist.
Zeilenumbrüche
Zeilemubrüche und leere Zeilen formt man mit dem Tag <br>. Dieser ist selbstschliessend.
Auch kann man zwischen die Tags <pre> und </pre> seinen Text einfügen, der dann mit allen Zeilenumbrüchen so aussehen wird, wie im Code. Dieser Tag verändert auch die Schriftart.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<p> This is a line. <br> This is a other line.</p>
<pre>
This text looks like
it does in the code.
</pre>
</body>
</html>
This is a line.
This is a other line.
This text looks like it does in the code.
Hier sieht man einen Paragraphen mit zwei Zeilen und einen kurzen Text, der so aussieht, wie im Code.
Fett/Kursiv
Fett: Zwischen den Tags <strong> und </strong> oder auch <b> und </b> wird der Text fettgedruckt erscheinen.
Kursiv: Zwischen den Tags <em> und </em> oder auch <i> und </i> wird der Text kursivgedruckt erscheinen.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<p>One word is <strong> bold </strong>.</p>
<p>One word is <b> bold </b> too.<p>
<p>One word is <em> italic </em>.</p>
<p>One word is <i> italic </i> too.</p>
</body>
</html>
One word is bold.
One word is bold too.
One word is italic.
One word is italic too.
Hier sind die Wörter bold und italic jeweils fett (bold) oder kursiv (italic) geschrieben.
Listen
Ungeordnete Listen: Zwischen die Tags <ul> und </ul> kann man seine Listen-Elemente zwischen die Tags <li> und </li> einfügen. Diese werden mit Punkten dargestellt.
Geordnete Listen: Zwischen die Tags <ol> und </ol> kann man seine Listen-Elemente zwischen die Tags <li> und </li> einfügen. Diese werden mit Nummern dargestellt.
Verschachtelte Listen: Zwischen den Tags <li> und </li> kann man eine weitere Liste einfügen. Dies nennt man eine verschachtelte Liste.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<ul>
<li>A part</li>
<li>Another part
<ul>
<li>A part inside a part<li>
<li>Another part inside a part<li>
</ul>
<li/>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
</body>
</html>
- A part
- Another part
- A part inside a part
- Another part inside a part
- First
- Second
Hier sieht man eine verschachtelte Liste innerhalb einer ungeordneten Liste. Darunter sieht man noch eine geordnete Liste.
Links
Links: Zwischen die Tags <a> und </a> kann man seinen text einfügen der zu Link werden soll. Die eigentliche Webadresse wird innerhalb des <a>-Tags zwischen die beiden Anführungszeichen des Hyperlink-Attributs href="" eingefügt. Links haben eine Standard-Unterschtreichung und haben die Standard-Farbe nicht auf schwarz.
Links in neuen Tabs: Um den Link in einem neuen Tab zu öffnen muss man nach dem Hyperlink-Attribut im <a>-Tag den weiteren Attribut target="_blank" einfügen.
Anchor-Links: Um einen Ort auf der selben Seite zu verlinken muss die URL die ID (mit #) des zu verlinkenden Orts sein. wenn man darauf klickt, wird der Anchor nun ganz oben au der Seite seit, es wird also rauf- oder runtergescrollt.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<p id="anchor">This paragraph is a anchor!</p>
<br>
<a href="https://typowerkstatt.ch">This link will open another website in this tab.</a>
<br><br>
<a href="https://typowerkstatt.ch" taret="_blank">This link will open another Website in a nex tab.</a>
<br><br>
<a href="#anchor">This link will lead to a anchor.</a>
</body>
</html>
Hier öffnet ein Link eine Website in einem anderen Tab, ein anderer öffnet eine neue Website im selben Tab und ein Letzter führt zu einem Paragraphen auf der selben Website.
Bilder
In den Tag <img> kann mann zwischen den Apostrophen des Attributs src="" den Bildlink eines Bildes einfügen.
Mit den Bildattributen width="" und height="" im Tag <img> kann man die Breite und Höhe des Bildes anpassen. Wenn nur ein Attribut angegeben ist, passt sich der andere Attribut proportional an.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<img src="https://prod-aboutswch-hcms-sdweb.imgix.net/dam/de/sd-web/6odgotVw2AUc/umwelt-natur.jpg?auto=format&w=2048" width="100%">
</body>
</html>
Hier sieht man ein Bild welches die Höhe an seiner Breite anpasst.
Attribute
Attribute werden in einen Tag eigefügt, die den Inhalt des Tags "definieren".
Grundsyntax: <tag attribute="value">Content</tag>
Beispiele für Attribute sind z.B. style="", class="", id="", etc.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<p style="color:red">This is a Paragraph!</p>
</body>
</html>
This is a Paragraph!
Hier sieht man einen Paragraphen der dank des style-Attributs rot geschrieben ist.
Bereiche
Einen Bereich kan man durch die Tags <div> und </div> erstellen. Dies wird vorallem im Umgang mit den anderen Codierungsarten wichtig sein.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<div>
<p>This is a Paragraph inside a divison.</p>
</div>
</body>
</html>
This is a Paragraph inside a division.
Hier sieht man einen Paragraphen der in einem Bereich drin ist.
Inline-Spans
Um einen einzelnen Teil eines Tag-Inhaltes "anzusprechen" benutzt man Inline-Spans.
Inline-Spans formt man mit den Tags <span> und <span> bei denen der anzusprechende teil zwischen den Tags sein soll.
In dem Tag <span> kann man abermals Attribute angeben (z.B. style="").
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<p>In this paragraph, there is a <span style="color:red">red</span> word!</p>
</body>
</html>
In this paragraph, there is a red word!
Hier sieht man einen Paragraphen, bei dem nur ein Teil des Satzes rot gefärbt ist.
Semantische-Tags
Semantische Tags beschreiben seinen Inhalt, haben aber keine Wirkung darauf, wie es auf der Website schlussendlich aussieht. Semantische Tags können auch in anderen Programmiersprachen helfen nur gewisse Bereiche anzusprechen, ohne Klassen zu benutzen.
Beispiele für Semantische Tags:
<header> = Einletende Inhalte, meisst ganz oben
<nav> = Enthält Navigationslinks
<main> = Hauptinhalt der Seite
<article> = Eigenständiger Teil, wie ein Blog-Post
<section> = Gruppiert zusammengehörige Inhalte, oft mit einer Überschrift
<footer> = Abschnitt am Ende mit Informationen wie Kontaktdaten oder Urheberrecht
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<header>
<h1>This is a tiny website-structure</h1>
<header>
<nav>
<a href="https://typowerkstatt.ch">This will lead to a really good website.</a>
</nav>
<main>
<section>
<h2>Baking</h2>
<article>
<h3>This is a list of baking ingredients for a bread:</h3>
<ul>
<li>Flour</li>
<li>Water</li>
<li>Yeast</li>
<li>Sugar</li>
<li>Salt</li>
<li>Oil</li>
<ul/>
</article>
<article>
<h3>Preparation</h3>
<p>Make the Bread...</p>
</article>
</section>
</main>
<br>
<br>
<br>
<br>
<footer>
<p>Credits to NJ_DA_QUEENY</p>
</footer>
</body>
</html>
This is a tiny website-structure
Hier sieht man eine kleine Websitestruktur, gemacht mit semantischen Tags.
Eingabefelder
Um ein Eingabefeld mit einer Zeile zu machen benutzt man den tag <input>, dieser ist selbstschliessend. Um ein Textfeld mit mehreren Zeilen zu machen benutzt man den Tag <textarea>, dieser ist nicht selbsschliessend.
Input-Attribute:
type="" -> definiert art von Zeichen im Eingabefeld (text = Buchstaben, password = Punkte)
name="" -> Gibt dem Server den Feldnamen an
placeholder="" -> transpareter Hinweis im Eingabefeld
value="" -> Steht im Vorfeld schon im Eingabefeld
maxlenght=""-> Gibt eine Maximalanzahl an Zeichen fürs Eingabefeld an
id="" -> Verbindet Eingabefelder mit Labels und Anderem
Mit den Tags <label> und </label> kann man Titel für Eingabefelder angeben. Zwischen den beiden Tags fügt man den sichtbaren Text ein, während man im <label>-Tag den Attribut for="" mit der ID des anzusprechenden Eingabefelds verbinden muss. Wenn man ein Label anklickt, öffnet man auch das Eingabefeld.
Das Formular, formt man mit den Tags <form> und </form>, diese sorgen dafür, das man die Daten auch an den Server schicken kann. Eingabefelder kann man jedoch auch anderweitig benutzen, als in einem Formular.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="name">Name</label>
<input id="name" placeholder="First Name" type="text">
<br>
<label for="password">Password:</label>
<input id="password" placeholder="Your Password" type="password" maxlenght="20">
</form>
</body>
</html>
Hier sieht man zwei Eingabefelder mit Labels.
Radio-Button
Radio-Buttons sind anwählbare <input>-Felder bei denen nur ein Feld anwählbar ist, also wenn man ein Feld anwählt, wird das vorherig angewählte Feld nun nicht mehr angewählt sein.
Radio-Buttons werden mit dem Attribut type="radio" in einem Input-Tag geformt. Sodass die Information auch beim Server ankommt muss man im Input-Tag auch noch den Attribut value="" angeben. Was zwischen den Anführungszeichen steht, wird an den Server geschickt. Der Attribut name="" bestimmt welche Radio-Buttons gruppiert sind, wenn ner Name gleich ist, sind diese Radio-Buttons in einer Gruppe.
Das Formular, formt man mit den Tags <form> und </form>, diese sorgen dafür, das man die Daten auch an den Server schicken kann. Radio-Buttons kann man jedoch auch anderweitig benutzen, als in einem Formular.
Hier kann man einen Titel anfügen indem man die Tags <label> und </label> benutzt.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="1">Red</label>
<input id="1" type="radio" name="color" value="red">
<br>
<label for="2">Green</label>
<input id="2" type="radio" name="color" value="green">
<br>
<label for="3">Blue</label>
<input id="3" type="radio" name="color" value="blue">
<form>
</body>
</html>
Hier sieht man drei verschiedene Radio-Buttons.
Checkboxen
Checkboxen sind anwählbare <input>-Felder bei denen man mehrere Felder anwählen kann. Klickt man wieder auf ein solches Feld wird es nun nicht mehr angewählt sein.
Diese Checkboxen formt man mit dem Attribut type="checkbox" in einem Input-Tag. Der Attribute name="" gruppiert die verschiedenen Checkboxen, also sind Checkboxen mit dem selben Namen in einer Gruppe. Der Attribut value="" lässt den Server wissen welche Antwort/Antworten angewählt wurden.
Das Formular, formt man mit den Tags <form> und </form>, diese sorgen dafür, das man die Daten auch an den Server schicken kann. Checkboxen kann man jedoch auch anderweitig benutzen, als in einem Formular.
Hier kann man einen Titel anfügen indem man die Tags <label> und </label> benutzt.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<form>
<label for="1">Red</label>
<input id="1" type="checkbox" name="color" value="red">
<br>
<label for="2">Green</label>
<input id="2" type="checkbox" name="color" value="green">
<br>
<label for="3">Blue</label>
<input id="3" type="checkbox" name="color" value="blue">
<form>
</body>
</html>
Hier sieht man drei verschiedene Checkboxen.
Dropdowns
Ein Dropdoxn-Menu formt man mit den Tags <select> und </select>, wärend man die verschiedenen Elemente in einem Dropdown-Menu mit den Tags <option> und </option> formt.
Zwischen den beiden Option-Tags kommt der eigentliche Text der verschiedenen Elementen rein. Auch hier muss man den Attribut value="" in den Option-Tags angeben, sodass der Server versteht, welche Antwort man angewählt hat. Am Select-Tag muss man den Attribut name="" angeben, sodass der Server anhand von diesem die Antwort auswerten kann.
Das Formular, formt man mit den Tags <form> und </form>, diese sorgen dafür, das man die Daten auch an den Server schicken kann. Dropdowns kann man jedoch auch anderweitig benutzen, als in einem Formular.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<form>
<select name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="pear">Pear</option>
</select>
</form>
</body>
</html>
Hier sieht man ein Dropdown-Menu mit drei Elementen.
Buttons
Mit den Tags <button> und </button> kann man einen Knopf/Button formen, bei dem der Text zwischen den Tags sichtbar/anklickbar ist.
Mit dem Attribut type="submit" im Button-Tag wird das Formular an den Servergeschickt.
Mit dem Attribut type="reset" im Button-Tag wird das Formular aut null gesetzt.
Das Formular, formt man mit den Tags <form> und </form>, diese sorgen dafür, das man die Daten auch an den Server schicken kann. Buttons kann man jedoch auch anderweitig benutzen, als in einem Formular.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text" placeholder="First Name" name="first-name">
<br>
<br>
<button type="submit">Send</button>
<br>
<br>
<button type="reset">Clear</button>
</form>
</body>
</html>
Hier geschieht beim Senden-Knopf nichts, da beim Server nicht angegeben wurde, was danach geschehen sollte.
Tabellen
Eine Tabelle macht man mit den Tags <table> und </table>. Eine Reihe der Tabelle formt man mit den Tags <tr> und </tr>. Eine Zelle in einer solchen Zeile formt man mit den Tags <td> und </td>. Zuletzt formt man eine Überschrift innerhalb einer Tabelle mit den Tags <th> und </th>.
Einen titel für eine Tabelle formt man mit den Tags <caption> und </caption>, dieser befindet sich ausserhalb der Tabelle.
Mit dem Attribut rowspan="" kan man Zeilen in einer Tabelle verbinden, je höher der Wert, desto mehr Zellen sind betroffen. Dies geschieht auch beim Attribut colspan="", jedoch bezieht es sich nun auf die Spalten.
Im Table-Tag kann man auch eine Border definieren, mit dem Attribut border="" kann man die Dicke der Border angeben.
Hier ist ein einfaches Beispiel:
Auf einer Website würde es so aussehen:
<!DOCTYPE html>
<html>
<body>
<caption>Tabelle</caption>
<table border="1">
<tr>
<th>Name</th>
<th>Alter</th>
</tr>
<tr>
<th>Anna</th>
<th>13 Jahre</th>
</tr>
<tr>
<th>Walter</th>
<th rowspan="2">15 Jahre</th>
</tr>
<tr>
<th>Thomas</th>
</tr>
</table>
</body>
</html>
| Name | Alter |
|---|---|
| Anna | 13 Jahre |
| Walter | 15 Jahre |
| Thomas |
Hier sieht man einen Paragraphen der auf der Website sichtbar ist und einen Kommentar der auf der eigentlichen Website nicht sichtbar ist.