Bis Ex4
parent
cde2f13ada
commit
97ecb38f48
|
|
@ -0,0 +1,5 @@
|
||||||
|
/* Schreiben Sie eine HTML-Datei, welche als Überschrift im Tab ‚Aufgabe 1‘ besitzt. Schreiben Sie eine Überschrift mit dem Inhalt ‚Mein Name‘. Geben Sie danach Ihren Namen aus. Dann soll die nächste Überschrift ‚Mein Lieblingsbild‘ kommen. Fügen Sie danach ein Bild ein. Als nächstes soll die Überschrift ‚Mein Link‘ mit einem Link zu einer Seite folgen.
|
||||||
|
Zum Schluss sollen noch zwei Listen folgen. Vor beiden Listen soll eine Überschrift stehen. Die erste Liste (ungeordnet) führt Ihre 5 Lieblingsgetränke. Die zweite Liste (geordnet) führt Ihre Einkaufsliste von Dingen die Sie brauchen.
|
||||||
|
|
||||||
|
Achten Sie darauf, dass jedes Element in einem eigenen Paragraphen steht. Die Überschriften sollen von oben nach unter immer kleiner werden. */
|
||||||
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
/* Wandeln Sie die html-Datei aus Aufgabe 1 in eine PHP-Datei um. Fügen Sie ganz unten noch das aktuelle Datum und die aktuelle Uhrzeit ein. Sie müssen nicht alle HTML-Elemente mit einem echo-Befehl ausgeben. Es reicht, dass Sie das Datum und die Uhrzeit mit ausgeben. Verwenden Sie die kleinste Größe für die Überschrift. */
|
||||||
84
index.html
84
index.html
|
|
@ -1,71 +1,31 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Mehrere Aufgaben</title>
|
<title>Übungsaufgaben Übersicht</title>
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css">
|
||||||
body, html {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
.main-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
text-align: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 20px;
|
|
||||||
margin: 10px 0;
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
||||||
width: 80%; /* Anpassen für unterschiedliche Breiten */
|
|
||||||
max-width: 600px; /* Maximalbreite festlegen */
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: #666;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
.button {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: #007BFF;
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 10px 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 5px;
|
|
||||||
transition: background-color 0.3s;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.button:hover {
|
|
||||||
background-color: #0056b3;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<header>
|
||||||
<div class="main-container">
|
<h1>Übungsaufgaben Übersicht</h1>
|
||||||
<div class="container">
|
</header>
|
||||||
<h1>Aufgabe 1 - HTML</h1>
|
<main>
|
||||||
<p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 1.</p>
|
<section class="task-list">
|
||||||
<a href="zielSeite1.html" class="button">Weiter zur Aufgabe 1</a>
|
<div class="task-item">
|
||||||
|
<a href="Aufgabe_1/index.php">Übungsaufgabe 1: Einführung in HTML</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="task-item">
|
||||||
<h1>Aufgabenüberschrift 2</h1>
|
<a href="Aufgabe_2/index.php">Übungsaufgabe 2: Datum & Uhrzeit in PHP</a>
|
||||||
<p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 2.</p>
|
|
||||||
<a href="zielSeite2.html" class="button">Weiter zur Aufgabe 2</a>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Weitere Aufgabencontainer hier hinzufügen -->
|
<div class="task-item">
|
||||||
</div>
|
<a href="Aufgabe_3/index.php">Übungsaufgabe 3: Ausgabe</a>
|
||||||
|
</div>
|
||||||
|
<div class="task-item">
|
||||||
|
<a href="aufgabe_4/index.php">Übungsaufgabe 4: Konkatination</a>
|
||||||
|
</div>
|
||||||
|
<!-- Weitere Aufgaben können hier hinzugefügt werden -->
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
/* Grundlegende Styles für den gesamten Body */
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #f4f4f9;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header-Styling */
|
||||||
|
header {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main-Styling */
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: calc(100vh - 60px); /* Höhe minus Header-Höhe */
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container für die Aufgabenliste */
|
||||||
|
.task-list {
|
||||||
|
max-width: 600px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling für einzelne Aufgaben */
|
||||||
|
.task-item {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
transition: background-color 0.3s, box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item a {
|
||||||
|
display: block;
|
||||||
|
padding: 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: #333;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item:hover {
|
||||||
|
background-color: #f0f8ff;
|
||||||
|
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-item a:hover {
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue