130 lines
4.5 KiB
HTML
130 lines
4.5 KiB
HTML
|
<h1>h1</h1>
|
||
|
<h2>h2</h2>
|
||
|
<h3>h3</h3>
|
||
|
|
||
|
Notice: this example app fetches an image and an audio file from a third-party website.
|
||
|
Those will not work offline. <a href="/">This is a link.</a>
|
||
|
|
||
|
<br />
|
||
|
<br />
|
||
|
|
||
|
<button class="red" onclick="hello()">button.red</button>
|
||
|
<button class="green">button.green</button>
|
||
|
<button class="blue">button.blue</button>
|
||
|
<button class="yellow">button.yellow</button>
|
||
|
<button>button</button>
|
||
|
|
||
|
<br />
|
||
|
<br />
|
||
|
|
||
|
<code>
|
||
|
x = 5;
|
||
|
y = 6;
|
||
|
z = x + y;
|
||
|
</code>
|
||
|
|
||
|
<br />
|
||
|
<br />
|
||
|
|
||
|
<audio controls>
|
||
|
<source src="https://www.audiocheck.net/Audio/audiocheck.net_brownnoise.ogg" type="audio/ogg">
|
||
|
Your browser does not support the audio element.
|
||
|
</audio>
|
||
|
|
||
|
<br />
|
||
|
|
||
|
<img src="https://picsum.photos/id/37/500/250" alt="Italian Trulli">
|
||
|
|
||
|
|
||
|
<div class="box flex">
|
||
|
Hello
|
||
|
<div class="box flex">
|
||
|
Hello
|
||
|
<div class="box flex">
|
||
|
Hello
|
||
|
<div class="box flex">
|
||
|
Hello
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim leo a urna gravida, vel pulvinar magna blandit. Cras eleifend, elit ac faucibus gravida, justo mauris ornare nisi, eget ultrices lorem tortor vitae purus. Quisque et dui arcu. Nam semper, mauris id molestie imperdiet, risus nunc dignissim dolor, nec cursus elit mi sit amet dui. Nulla aliquam id mauris sed posuere. Nam mollis velit luctus accumsan aliquam. In tempor, felis id finibus tincidunt, erat nulla vehicula orci, a venenatis mauris nunc et diam. Aliquam lorem sem, iaculis ut mollis in, feugiat a mauris. Nam laoreet vestibulum leo a aliquet. Nam sit amet neque erat.</p>
|
||
|
|
||
|
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor, sem ac pretium accumsan, dui sapien placerat ligula, ut maximus lacus eros sed tortor. Vivamus finibus facilisis felis, quis dictum felis vestibulum nec. Mauris eu facilisis est, nec tempor sem. Quisque ac ultricies tortor. Morbi et ante at dolor accumsan molestie. Curabitur facilisis condimentum lorem a luctus. Quisque lectus risus, vestibulum non malesuada quis, porta sed urna. Sed elementum magna in velit sagittis, vel fringilla ipsum pulvinar. Morbi nec lectus egestas, laoreet erat fringilla, tristique quam.</p>
|
||
|
|
||
|
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mattis ante. Donec venenatis pretium ornare. Nulla vel purus cursus, molestie velit a, vehicula mi. Phasellus ac eleifend sapien, in euismod mauris. Donec quis nisi sodales, accumsan mi sed, malesuada purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent venenatis enim et nisi interdum, nec sodales diam suscipit. Etiam nisl neque, dapibus id felis eget, laoreet posuere eros. Donec arcu neque, aliquam vel fringilla ut, laoreet in velit. Ut tincidunt rutrum eros vel fringilla. Sed at eleifend sem. Pellentesque ut leo in ligula accumsan dignissim quis at justo. Donec luctus felis sed lacus pharetra aliquam. Nam volutpat quis tellus eget lobortis. Proin ultrices ante vitae quam efficitur accumsan.</p>
|
||
|
|
||
|
<p>Here is a quote from WWF's website:</p>
|
||
|
|
||
|
<blockquote cite="http://www.worldwildlife.org/who/index.html">
|
||
|
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
|
||
|
</blockquote>
|
||
|
|
||
|
|
||
|
<table>
|
||
|
<tr>
|
||
|
<th>Company</th>
|
||
|
<th>Contact</th>
|
||
|
<th>Country</th>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Alfreds Futterkiste</td>
|
||
|
<td>Maria Anders</td>
|
||
|
<td>Germany</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Centro comercial Moctezuma</td>
|
||
|
<td>Francisco Chang</td>
|
||
|
<td>Mexico</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Ernst Handel</td>
|
||
|
<td>Roland Mendel</td>
|
||
|
<td>Austria</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Island Trading</td>
|
||
|
<td>Helen Bennett</td>
|
||
|
<td>UK</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Laughing Bacchus Winecellars</td>
|
||
|
<td>Yoshi Tannamuri</td>
|
||
|
<td>Canada</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td>Magazzini Alimentari Riuniti</td>
|
||
|
<td>Giovanni Rovelli</td>
|
||
|
<td>Italy</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
|
||
|
<h2>An Unordered HTML List</h2>
|
||
|
|
||
|
<ul>
|
||
|
<li>Coffee</li>
|
||
|
<li>Tea</li>
|
||
|
<li>Milk</li>
|
||
|
</ul>
|
||
|
|
||
|
<h2>An Ordered HTML List</h2>
|
||
|
|
||
|
<ol>
|
||
|
<li>Coffee</li>
|
||
|
<li>Tea</li>
|
||
|
<li>Milk</li>
|
||
|
</ol>
|
||
|
|
||
|
<form">
|
||
|
<textarea rows="5" cols="32">This is a textarea.</textarea>
|
||
|
<br />
|
||
|
<div class="flex-column" style="align-items: start;">
|
||
|
<input type ="radio" />
|
||
|
<input type ="radio" />
|
||
|
<input type ="checkbox" />
|
||
|
<input type ="checkbox" />
|
||
|
</div>
|
||
|
<br />
|
||
|
<input class="green" type="submit" value="Button">
|
||
|
</form>
|