80 lines
4.5 KiB
HTML
80 lines
4.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Sample Website</title>
|
|||
|
|
<link type="text/css" rel="stylesheet" href="samplesite.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>Die größte Überschrift</h1>
|
|||
|
|
<h2>Das erste wichtige Thema: Fließtexte</h2>
|
|||
|
|
<p>Fließtexte stehen in Absätzen, auf Englisch: Paragraph. Daher wird das Tag auch mit dem Buchstaben "p" benannt.</p>
|
|||
|
|
<p>Jeder neue Absatz wird dabei von neuen p-Tags umschlossen.</p>
|
|||
|
|
<p>Allerdings gibt es Ausnahmen:<br>
|
|||
|
|
Ein einzelnes(!) "br"-Tag sorgt für einen Zeilenumbruch.</p>
|
|||
|
|
<h2>Gleichwichtig: Listen</h2>
|
|||
|
|
<h3>Ungeordnete Listen</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>sind nicht nummeriert</li>
|
|||
|
|
<li>werden mit einem "ul"-Tag (unordered List) eingeleitet</li>
|
|||
|
|
<li>Die Listenelemente stehen in "li"-Tags</li>
|
|||
|
|
</ul>
|
|||
|
|
<h3>Geordnete Listen</h3>
|
|||
|
|
<ol>
|
|||
|
|
<li>werden nummeriert dargestellt</li>
|
|||
|
|
<li>werden mit einem "ol"-Tag (ordered list) eingeleitet</li>
|
|||
|
|
<li>die Listenelemente stehen <em>ebenfalls</em> in "li"-Tags</li>
|
|||
|
|
</ol>
|
|||
|
|
<h2>Bilder</h2>
|
|||
|
|
<img src="reh.jpg" alt="wartendes Reh">
|
|||
|
|
<p>Bilder im Web sollten nicht zu groß sein, ansonsten müssen Besucher, wie dieses Reh hier, lange darauf warten, bis sie angezeigt werden. Die ursprüngliche Seitenlänge betrug etwa 6000 Pixel, hier auf der Seite wurde sie auf 640 verringert. Auch über die jpg-Kompression lassen sich Einsparungen erzielen.</p>
|
|||
|
|
<h2>Links</h2>
|
|||
|
|
<p>Was wäre das Internet ohne Links? Es wäre einfach nicht das gleiche…</p>
|
|||
|
|
<a href="https://validator.w3.org/">Ein Link zum W3C-Validator</a>
|
|||
|
|
<p>Der Validator nimmt HTML-Code entgegen und prüft, ob dieser den Spezifikationen entspricht. Ist das der Fall, kannst Du davon ausgehen, dass die meisten Browser Deine Website halbwegs ordentlich darstellen.</p>
|
|||
|
|
<p>Links können für sich stehen (wie der Link zum Validator weiter oben), oder sie können im Fließtext erscheinen, wie <a href="https://html.spec.whatwg.org/">dieser Link zu den HTML-Spezifikationen</a>.</p>
|
|||
|
|
<h2>Noch ein Wort zum Design…</h2>
|
|||
|
|
<p>Eine Stärke, die sich allerdings erst nach der HTML-Frühzeit entwickelt hat, ist die Trennung von Inhalt und Design.</p>
|
|||
|
|
<p>Der Inhalt liegt strukturiert (mit "h"-, "p"-, "ul"- und vielen weiteren Tags) in einer HTML-Datei. Um steuern zu können, wie dieser Inhalt dargestellt wird – auch auf verschiedenen Geräten und Bildschirmgrößen – wird eine css-Datei eingebunden. Die sieht typischerweise so aus:</p>
|
|||
|
|
<p class="code">
|
|||
|
|
body {<br>
|
|||
|
|
background-color: #000000;<br>
|
|||
|
|
margin-left: 6%;<br>
|
|||
|
|
margin-right: 6%;<br>
|
|||
|
|
width: 640px;<br>
|
|||
|
|
font-family: Calibri, Verdana, Geneva, Arial, sans-serif;<br>
|
|||
|
|
font-size: large;<br>
|
|||
|
|
color: #DCDCDC;<br>
|
|||
|
|
}<br>
|
|||
|
|
<br>
|
|||
|
|
h1 {<br>
|
|||
|
|
font-size: 150%;<br>
|
|||
|
|
font-weight: bold;<br>
|
|||
|
|
}<br>
|
|||
|
|
<br>
|
|||
|
|
…<br>
|
|||
|
|
<br>
|
|||
|
|
.code {<br>
|
|||
|
|
font-family: IBM Plex Mono, Liberation Mono, Courier, monospace;<br>
|
|||
|
|
color: #CCCCCC;<br>
|
|||
|
|
}<br>
|
|||
|
|
</p>
|
|||
|
|
<p>Neben den üblichen Elementen wie "body", "h" und "p" können auch für ausgewählte Absätze (oder alle anderen Elemente) besondere Einstellungen festegelegt werden: hier ist es die (nur leicht veränderte) Darstellung von Programmcode, die in der HTML-Datei mit der Bezeichnung class="code" markiert wird, und die entsprechend in der CSS-Datei auftaucht.
|
|||
|
|
</p>
|
|||
|
|
<p>Übrigens: die CSS-Datei, die diese Seite steuert, sieht etwas anders aus als oben im Beispiel! Wenn Du die Seite auf einem größeren Bildschirm betrachtest, verändere einmal die Fenstergröße in der Breite, und versuche in der CSS-Datei nachzuvollziehen, warum sich der Inhalt manchmal ändert…</p>
|
|||
|
|
<h2>Interaktivität</h2>
|
|||
|
|
<script>
|
|||
|
|
function tierDesMonats() {
|
|||
|
|
vorsilben = ["Blau", "Eich", "Ele", "Nas", "Säbelzahn", "Wal"];
|
|||
|
|
nachsilben = ["wal", "hörnchen", "fant", "horn", "tiger", "ross"]
|
|||
|
|
ind_vor = Math.floor(Math.random() * vorsilben.length);
|
|||
|
|
ind_nach = Math.floor(Math.random() * nachsilben.length);
|
|||
|
|
tier = vorsilben[ind_vor] + nachsilben[ind_nach]
|
|||
|
|
document.getElementById("tier").innerHTML = tier;
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<p id="tier">Tier des Monats</p>
|
|||
|
|
<button type="button" onclick="tierDesMonats()">Klicke hier für ein Tier!</button>
|
|||
|
|
<p>Mit JavaScript (nicht Java) lassen sich Webseiten interaktiv machen. Der Code für diese kleinen Programme kann dabei in der HTML-Datei eingebettet werden. (Er kann aber auch in einer eigenen Datei liegen.) Das Einbetten funktioniert mit dem "Script"-Tag.</p>
|
|||
|
|
</body>
|
|||
|
|
</html>
|