Kleiner JavaScript Kurs
Exkurs CSS Grundlagen
Mit der Seitenbeschreibungs-Sprache HTML (HyperText Markup Language) werden Internetseiten beschrieben. Formatiert werden die Seiten über CSS (Cascading Style Sheets; deutsch mehrstufige Formatvorlagen)
CSS Definitionen werden in der Regel in einer eigenen Datei gespeichert (z.B. style.css) und über einen Link im head in die HTML Seite eingebunden:
<link href="css/style.css" rel="stylesheet">
CSS Definitionen können aber auch direkt im head oder im body einer HTML Seite stehen:
<body>
<p style="text-align: center; color: green;">
Dieser Absatz wird über ein style-Attribut formatiert.
</p>
<p>
Dieser Absatz ist unformatiert.
</p>
</body>Einige Beispiele für CSS Definitionen
Tags einheitlich formatieren z.B. die Überschriften <h1>
<!doctype html>
<html lang="de">
<head>
<style>
h1 {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>Erste Überschrift</h1>
<p>Das ist ein Absatz</p><br>
<h1>Zweite Überschrift</h1>
<p>Das ist der zweite Absatz</p>
</body>
</html>
Eine bestimmte Klasse (class), oder id formatieren
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
.menue{
background-color: skyblue;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 1em;
}
.menue ul li {
display: inline;
list-style-type: none;
}
.menue ul li a{
background-color: blue;
color: white;
text-decoration-line: none;
font-size: larger;
border-radius: 10%;
}
#aktiv {
background-color: darkblue !important;
}
</style>
</head>
<body>
<nav class="menue">
<ul>
<li><a href="#link_1.html">Menüpunkt 1</a></li>
<li><a href="#link_2.html" id="aktiv">Menüpunkt 2</a></li>
<li><a href="#link_3.html">Menüpunkt 3</a></li>
</ul>
</nav>
<article>
<ul>
<li><a href="#link_1.html">Menüpunkt 1</a></li>
<li><a href="#link_2.html">Menüpunkt 2</a></li>
<li><a href="#link_3.html">Menüpunkt 3</a></li>
</ul>
</article>
</body>
</html>
Responsive Webdesign
Heutzutage muss eine Webseite sowohl auf einem Computermonitor, als auch auf einem kleinen Tablet- oder Smartphonedisplay gut aussehen. Damit man nicht 2 Versionen einer Seite (eine "normale" für große Computermonitore und eine für mobile Geräte) formatiert man die Internetseite mit CSS so, dass sich das Aussehen an das Display des Anwenders anpasst. So sollen sich z.B. Bilder und Blockelemente an die Größe des Displays anpassen. Oft verwendet man mehrere Spalten, die auf großen Monitoren nebeneinander angezeigt werden, auf kleinen Diplays untereinander. Ein Menü wird nur bei großen Anzeigen gezeigt, bei Smartphones wird stattdessen ein Symbol oder angezeigt. Hier ein paar einfache Beispiele.
<body>
<img src="images/abenddaemmerung_sylt.jpg" alt="Abenddämmerung auf Sylt">
</body>Damit sich das Bild an die Größe des Displays anpasst erstellen wir folgendes CSS:
<style>
img{
max-width: 100%;
height: auto;
}
</style>