HTTP, HTML, Webserver, Browser, …)XMLHttpRequest für AJAXPHP, Perl, Java, …AJAXHTTP: Hypertext Transfer ProtocolHTML: Hypertext Markup LanguageCSS: Cascading StylesheetsJavaScriptHTML-SeitenHTTP-Server von Hand schreibenHTML-Darstellung von Hand versuchennode.js-Anwendung mit eingebauten Templating-FunktionenSQL und Templating-Anweisungennode.js-UnterstützungGOTY-Nominees
Overwatch is a team-based multiplayer FPS video game developed
and published by Blizzard Entertainment. It was released in the
end of May 2016 for Microsoft Windows, PlayStation 4 & Xbox One.
\documentclass{article}
\begin{document}
\section{Overwatch}
\label{game:overwatch}
Overwatch ist ein Mehrspieler-FPS\footnote{First Person Shooter}
des US-amerikanischen Spielentwicklers Blizzard Entertainment.
Das Spielgeschehen ist nach Warcraft, StarCraft und Diablo im
insgesamt vierten Phantasieuniversum Blizzards angesiedelt.
Overwatch erschien im Mai 2016 f{\"u}r Microsoft Windows, PlayStation
4 und Xbox One. Seither werden in regelm{\"a}{\ss}igen Abst{\"a}nden
Patches\footnote{Fehlerbereinigungen} und Updates ver\-{\"o}ffent\-licht.
\textbf{Siehe auch}: Kapitel \ref{game:paladins} zu einem Spiel
das ganz und gar nicht Inhalte direkt aus Overwatch übernommen hat.
\newpage
\section{Paladins}
\label{game:paladins}
Ganz und gar nicht Overwatch. \cite{videogamedunkey}
\end{document}
\section\footnote\cite\ref# Overwatch
Overwatch ist ein Mehrspieler-FPS des US-amerikanischen
Spielentwicklers Blizzard Entertainment. Das Spielgeschehen ist
nach Warcraft, StarCraft und Diablo im insgesamt vierten
Phantasieuniversum Blizzards angesiedelt. Overwatch erschien
im Mai 2016 für
* Microsoft Windows
* PlayStation 4
* Xbox One.
Seither werden in regelmäßigen Abständen Fehlerbereinigungen
(englisch Patches) und Updates veröffentlicht.
**Siehe auch**: [Kapitel 2](paladins.html) zu einem Spiel
das ganz und gar nicht Inhalte direkt aus Overwatch übernommen hat.#-Symbol eingeleitet. Die Anzahl der Wiederholungen steht für die Art der Überschrift.[Text](Ziel)* eingeleitetHTML<h1><abbr title="Game of the Year">GOTY</abbr>-Nominees</h1>
<p>
Overwatch is a team-based multiplayer <abbr title="First Person Shooter">
FPS</abbr> video game developed and published by
<a href="http://www.blizzard.com"> Blizzard Entertainment.</a> It was
released in <time datetime="2001-05-15T19:00">the end of May 2016</time>
for Microsoft Windows, PlayStation 4 & Xbox One.
</p>
HTMLHTML als Sprache zur Beschreibung von DokumentenPDF-Dokumenten, Libre Office, Microsoft Word …<element>) und schließendes (</element>) Tag&) eingeleitet und mit einem Semikolon (;) beendet.
< erzeugt “<”> erzeugt “>”& erzeugt “&”" erzeugt "head-Knoten für Metadatenbody-Knoten als Wurzel für Inhalt des Dokuments<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>HTML-Dökümént</title>
</head>
<body>
<h1>👋 Überschrift 😎</h1>
<p>💛💚 Absatz 💙💜</p>
</body>
</html>
<h1>Oberste Ebene</h1>
<h2>Zweite Ebene</h2>
<h3>Dritte Ebene</h3>
<h4>Vierte Ebene</h4>
<h5>Fünfte Ebene</h5>
<h6>Sechste Ebene</h6>
p-Element (paragraph) ausgezeichnetem-Elementen (emphasis)q-Elementen (quote)mark<p>
Gorrister went white. It was almost as though he had seen a voodoo
icon, and was afraid of the future. <q>Oh, God,</q> he mumbled,
and walked away. The three of us followed him after a time, and found
him sitting with his back to one of the smaller chittering banks,
his head in his hands. Ellen knelt down beside him and stroked his
hair. He didn't move, but his voice came out of his covered face
quite clearly. <q><em>Why</em> doesn't it just do us in and get it
over with? Christ, I don't know how much longer I can go on like
this.</q>
</p>
<p>
It was our <mark>one hundred and ninth year</mark> in the computer.
</p>
li-Element beschrieben<ul>
<li>Route 66</li>
<li>Numbani</li>
<li>Eichenwalde</li>
</ul>
<ol>
<li>Mei</li>
<li>Lucio</li>
<li>Reinhardt</li>
</ol>
<ul> und <ol>-Elemente dürfen nur <li>-Elemente enthalten<ul>
<li>
Support
<ol>
<li>Lucio</li>
<li>Zenyatta</li>
<li>Ana</li>
<li>Mercy</li>
<li>Symmetra</li>
</ol>
</li>
</ul>
<ul>
<li>Support</li>
<ol>
<li>Lucio</li>
<li>Zenyatta</li>
<li>Ana</li>
<li>Mercy</li>
<li>Symmetra</li>
</ol>
</ul>
<ul>
<li>
<h1>Eichenwalde</h1>
<p>
Eichenwalde is located in the middle of the Black
Forest. It consists of the following checkpoints:
</p>
<ol>
<li>Battering Ram</li>
<li>Castle Door</li>
<li>Throne Room</li>
</ol>
</li>
</ul>
<!-- und --> um den kommentierten Bereich zu markieren.<ul>
<li>Offense</li>
<ul>
<!-- Für Kiddies -->
<li>Genji</li>
<li>McCree</li>
<li>Reaper</li>
<!-- Ganz OK -->
<li>Pharah</li>
<li>Tracer</li>
<li>Soldier: 76</li>
<!-- <li>Eike Harms</li> -->
</ul>
</ul>
<dt>, “term”) mit anschließender Erläuterung (<dd>)<dl>
<dt>Carrot Ironfoundersson</dt>
<dd>Adopted dwarf, member of the nightwatch</dd>
<dt>Bill Door</dt>
<dt>Beau Nidle</dt>
<dt>Mr Scrub</dt>
<dd>Death (literally)</dd>
<dt>GNU</dt>
<dd>Virus-like signal on the clacks</dd>
<dd>Project that aims to free software</dd>
<dd>Asteroid 9965 is named GNU</dd>
</dl>
HTML-Elemente<caption>-Element als Titel. Sollte als erstes oder letztes Kind genutzt werden, so dass es über oder unter der eigentlichen Tabelle steht.<thead>- und/oder <tfoot>-Elemente für Kopf- oder Fußzeilen.<tbody>-Elemente, in denen die eigentlichen Tabellenzellen definiert sind.<tr>-Elemente (für Zeilen) mit jeweils der gleichen Anzahl von <td>-Elementen (für Spalten).<td>-Elemente.<table>
<caption>Gebäudeliste</caption>
<thead>
<tr>
<th>Name</th>
<th>Kosten</th>
<th>Größe</th>
</tr>
</thead>
<tbody>
<tr>
<td>Polizei</td><td>500</td><td>9</td>
</tr>
<tr>
<td>Feuerwehr</td><td>500</td><td>9</td>
</tr>
<tr>
<td>Stadion</td><td>3000</td><td>16</td>
</tr>
<tr>
<td>Hafen</td><td>5000</td><td>16</td>
</tr>
</tbody>
</table>
URL im Attribut srcaltwidth und height<img src="/assets/photos/lttp-worlds.png"
alt="Screenshot from LTTP"
height="64">
SVG) benutzen<img height="128px" src="/assets/icons/squirrel.svg">
<img height="128px" src="/assets/icons/squirrel.png">
<img height="128px" src="/assets/icons/spider-web.svg">
<img height="128px" src="/assets/icons/spider-web.png">
<p>
Diese Grafiken stammen von
<a href="http://game-icons.net/">game-icons.net</a>
</p>
URL<h1>Links Intro 1</h1>
<a href="links-intro-2.html">Relativ zu Intro 2</a>
<br>
<a href="/snippets/intro_html/links-intro-2.html">
Mit absolutem Pfad zu Intro 2
</a>
<br>
<a href="https://webanwendungen.fh-wedel.de/snippets/intro_html/links-intro-1.html">
Mit absoluter URL zu Intro 2
</a>
<progress value="70" max="100">70%</progress>
<progress>Windows File Transfer</progress>
<progress value="9005" max="9000"></progress>
<details>
<summary>System Requirements</summary>
<p>Requires a computer running an operating system. The computer
must have some memory and ideally some kind of long-term storage.
An input device as well as some form of output device is
recommended.</p>
</details>Was haben diese veralteten Elemente gemeinsam?
Sie definieren sich über optische Vorgaben, nicht über inhaltliche Bedeutungen.
Die folgenden Elemente sind für den Benutzer unsichtbar, werden aber von Assistenzsystemen oder Suchmaschinen berücksichtigt.
<header><footer><nav><main><article><section><main>
<article>
<h1>First Contact War</h1>
<section>
<h2>Synopsis</h2>
<p>
The First Contact War, referred to as the Relay 314 Incident by the
turians, was a small, three-month conflict between the human Systems
Alliance and the Turian Hierarchy.
</p>
</section>
<section>
<h2>Progression</h2>
<p>
After discovering the Charon Relay, humans began a rapid expansion
thanks to their new-found connection to the mass relay network.
Hoping to expand their territory and driven by immense curiosity,
they began activating every mass relay they could find.
</p>
</section>
</article>
</main>
<aside>
<h1>Advertisement</h1>
<p>Watch the all-elcor rendition of Shakespeare's Hamlet</p>
</aside>
<footer>
<p>(c) 2010 The favourite store on the Citadel</p>
</footer>
HTML-FragmentenHTML-Dokumente können auch Daten enthalten (“Template”)---) vom HTML- und Handlebars-Quelltext getrennt.hbsYAML-Daten, welche zu einem bestimmten Dokument gehörenJSON-Dokumenten ebenfalls möglichpage für alle Daten der konkreten Seiteglobal für global verfügbare Daten (Name des Webauftritts, …)vorname: "James"
nachname: "Bond"
---
<p>
Der Name ist {{ page.nachname }},
<em>{{ page.vorname }}</em> {{ page.nachname }}.
</p>
name: wert-Paaren angegebenname ist immer eine Zeichenkette und kann auch in Anführungszeichen notiert werdenwert folgt komplexeren Regeln, kann aber auch eine Zeichenkette sein{{ }} im HTML setzen die Werte einvorname: "Harry"
nachname: "Potter"
---
<p>
Der Name ist {{ page.nachname }},
<em>{{ page.vorname }}</em> {{ page.nachname }}.
</p>
true oder false0 bis 9, maximal 1 . für Nachkommastellen und Vorzeichen mit + oder -vorname: "Hermine"
nachname: "Granger"
weiblich: true
geburtsjahr: 1988
---
<ul>
<li>Vorname: {{ page.vorname }}</li>
<li>Nachname: {{ page.nachname }}</li>
<li>Weiblich: {{ page.weiblich }}</li>
<li>Männlich: {{ page.männlich }}</li>
<li>Geburtsjahr: {{ page.geburtsjahr }}</li>
</li>SQL-Abfragen für skalare WerteSQL-Abfragen im Frontmatter notiert werdennum_chapters: SELECT COUNT(*) FROM chapter;
num_choices: SELECT COUNT(*) FROM next_chapter;
---
Es gibt {{ page.num_chapters }} Kapitel und
insgesamt {{ page.num_choices }} Entscheidungen
in diesem Buch.
SQL-Abfragen für einzelne Ergebnis-Zeilen. zugreifbarchapter: SELECT * FROM chapter WHERE chapter_id = 2;
---
Das Kapitel mit der ID {{ page.chapter.chapter_id }}
heißt "{{ page.chapter.caption }}".
SQL-AbfragenSELECT, FROM, WHERE und GROUP BY> Operators für mehrzeilige Wertechapter: >
SELECT *
FROM chapter
WHERE chapter_id = 2;
---
Das Kapitel mit der ID {{ page.chapter.chapter_id }}
heißt "{{ page.chapter.caption }}".
HTML-Code für zwei verschiedene Dokumente ist identischvorname: "James"
nachname: "Bond"
---
<p>
Der Name ist {{ page.nachname }},
<em>{{ page.vorname }}</em> {{ page.nachname }}.
</p>
vorname: "Harry"
nachname: "Potter"
---
<p>
Der Name ist {{ page.nachname }},
<em>{{ page.vorname }}</em> {{ page.nachname }}.
</p>
template und contenttemplate im Frontmatter{{content}} Anweisung beinhaltenHTML-Dokument mit template und content<!-- templates/template-html.hbs -->
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>title: "Template Beispiel I"
template: "template-html"
---
<p>Ich bin ein valides Dokument</p>HTML-GerüstHTML-Template auftemplatetitle: "Template Beispiel II"
template: "template-nav-yaml"
---
<p>Ich bin ein valides Dokument (mit Navigation)</p>template: "template-html"
---
<!-- templates/template-nav-yaml.hbs -->
<nav>
<ul>
<li><a href="#">Hauptseite</a></li>
<li><a href="#">Keine Hauptseite</a></li>
</ul>
</nav>
{{ content }}