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. */
|
||||
88
index.html
88
index.html
|
|
@ -1,71 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mehrere Aufgaben</title>
|
||||
<style>
|
||||
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>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Übungsaufgaben Übersicht</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="container">
|
||||
<h1>Aufgabe 1 - HTML</h1>
|
||||
<p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 1.</p>
|
||||
<a href="zielSeite1.html" class="button">Weiter zur Aufgabe 1</a>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h1>Aufgabenüberschrift 2</h1>
|
||||
<p>Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 2.</p>
|
||||
<a href="zielSeite2.html" class="button">Weiter zur Aufgabe 2</a>
|
||||
</div>
|
||||
<!-- Weitere Aufgabencontainer hier hinzufügen -->
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h1>Übungsaufgaben Übersicht</h1>
|
||||
</header>
|
||||
<main>
|
||||
<section class="task-list">
|
||||
<div class="task-item">
|
||||
<a href="Aufgabe_1/index.php">Übungsaufgabe 1: Einführung in HTML</a>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<a href="Aufgabe_2/index.php">Übungsaufgabe 2: Datum & Uhrzeit in PHP</a>
|
||||
</div>
|
||||
<div class="task-item">
|
||||
<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>
|
||||
</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