Public
Edited
Mar 29, 2023
9 forks
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<h1>Inhalt des Elements</h1> <!-- Kommentar: Kleinste Überschrift, und dies ist ein Kommentar, der nicht weiter interpretiert wird. -->
Insert cell
Insert cell
<h4>Inhalt des <i>Elements</i></h4> <!-- Kommentar: <i>...</i> macht den umschlossenen Inhalt kursiv -->
Insert cell
Insert cell
Dies ist ein <br> Zeilenumbruch.
Insert cell
<img src='https://www.hslu.ch/-/media/campus/common/images/teasers/i/ueber-uns/rendering-neubau-386x168.jpg'>
Insert cell
<hr> <!-- horizontal rule-->
Insert cell
Insert cell
<!-- Kommentar: Link-Element-->
<a href='http://www.google.de' target="_blank" meinEigenesAttribut='test'>
<!-- Kommentar: der Attributswert von target gibt an, dass die Website in einem neuen Tab geöffnet werden soll. -->
Klick mich
</a>
Insert cell
<!-- Kommentar: Der Attributswert von title gibt den Tooltip-Text beim Mouseover an. -->
<h6 title='Dies wird im Tooltip angezeigt'>Meine Überschrift</h6>
Insert cell
<!-- Kommentar: Mit den Werten der id- und class-Attribute können Elemente referenziert werden-->
<h6 id='einmaligeID' class='klassenName1 klassenName2'>Überschrift mit Referenz</h6>
<!-- Kommentar: Ein Klassenname kann bei mehreren Elementen gesetzt werden. Mithilfe von IDs und Klassennamen werden Elemente referenziert, Style-Eigenschaften zugeordnet und Interaktions-Events definiert. Später mehr hierzu. -->
Insert cell
Insert cell
Insert cell
!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h6>This is a Heading</h6>
<p>This is a paragraph.</p>
</body>
</html><
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
<a href='http://www.google.de' target="_blank">Klick mich</a>
<div>Mein Div <a href='http://www.google.de' target="_blank">Klick mich - Block</a> </div>
<a href='http://www.google.de' target="_blank">Klick mich2</a>
Insert cell
Insert cell
<a href='http://www.google.de' target="_blank">Klick mich</a>
<span>
Mein Span <a href='http://www.google.de' target="_blank">Klick mich - Span</a>
</span>
<a href='http://www.google.de' target="_blank">Klick mich2</a>
Insert cell
Insert cell
Insert cell
Insert cell
<b>Fetter Text</b><br>

<i>Kursiver Text</i><br>

<mark>Markierter Text</mark><br>

<small>Kleiner Text</small><br>

<del>Durchgestrichener Text</del><br>

<ins>Inserted Text</ins><br>

CO<sub>2</sub><br>

n<sup>2</sup><br>
Insert cell
Insert cell
Insert cell
<ol> <!-- Kommentar: ordered list-->
<li>Coffee</li> <!-- Kommentar: list item-->
<li>Tea</li>
<li>Milk</li>
</ol>

<ul> <!-- Kommentar: unordered list-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Insert cell
Insert cell
<table>
<tr> <!-- Kommentar: table row-->
<th>Company</th> <!-- Kommentar: table header, Spaltenüberschrift-->
<th>Contact</th>
<th>Country</th>
</tr>
<tr> <!-- Kommentar: table row-->
<td>Alfreds Futterkiste</td> <!-- Kommentar: table data, Zelle in Tabellenzeile -->
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
Insert cell
Insert cell
<input type='text' value='MeineEingabe'>
Insert cell
Insert cell
<textarea>hello</textarea>
Insert cell
Insert cell
<button id='meinButton'>Mein Button</button>
Insert cell
Insert cell
<video width="600" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more