HTML-CSS_Lernwebseite
Obai Albek
commit
39572eedd6
|
|
@ -0,0 +1,5 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<buildpath>
|
||||||
|
<buildpathentry kind="src" path=""/>
|
||||||
|
<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
|
||||||
|
</buildpath>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<projectDescription>
|
||||||
|
<name>HTML-CSS_Lernwebseite</name>
|
||||||
|
<comment></comment>
|
||||||
|
<projects>
|
||||||
|
</projects>
|
||||||
|
<buildSpec>
|
||||||
|
<buildCommand>
|
||||||
|
<name>org.eclipse.wst.common.project.facet.core.builder</name>
|
||||||
|
<arguments>
|
||||||
|
</arguments>
|
||||||
|
</buildCommand>
|
||||||
|
<buildCommand>
|
||||||
|
<name>org.eclipse.wst.validation.validationbuilder</name>
|
||||||
|
<arguments>
|
||||||
|
</arguments>
|
||||||
|
</buildCommand>
|
||||||
|
<buildCommand>
|
||||||
|
<name>org.eclipse.dltk.core.scriptbuilder</name>
|
||||||
|
<arguments>
|
||||||
|
</arguments>
|
||||||
|
</buildCommand>
|
||||||
|
</buildSpec>
|
||||||
|
<natures>
|
||||||
|
<nature>org.eclipse.php.core.PHPNature</nature>
|
||||||
|
<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
|
||||||
|
</natures>
|
||||||
|
</projectDescription>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
eclipse.preferences.version=1
|
||||||
|
encoding/<project>=UTF-8
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
eclipse.preferences.version=1
|
||||||
|
include_path=0;/HTML-CSS_Lernwebseite
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<faceted-project>
|
||||||
|
<fixed facet="php.core.component"/>
|
||||||
|
<fixed facet="php.component"/>
|
||||||
|
<installed facet="php.core.component" version="1"/>
|
||||||
|
<installed facet="php.component" version="8.2"/>
|
||||||
|
</faceted-project>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?php
|
||||||
|
if(!empty($_POST["submit"])){
|
||||||
|
$email = $_POST["email"];
|
||||||
|
$passwort = $_POST["password"];
|
||||||
|
$stmt = $dbh->prepare("SELECT `password` FROM registration WHERE email = ?");
|
||||||
|
$stmt->execute([$email]);
|
||||||
|
$zeile = $stmt->fetch();
|
||||||
|
$hash_passwort = $zeile['password'];
|
||||||
|
|
||||||
|
// Password prufen
|
||||||
|
if (password_verify($passwort, $hash_passwort)) {
|
||||||
|
header("Location: konto_benutzer.php");
|
||||||
|
exit();
|
||||||
|
} else {
|
||||||
|
exit("<script>alert('Falsche E-Mail Adresse oder kennwort.');</script>".
|
||||||
|
"<a style= 'margin-left: 2px; margin-top:20px;' href='password_zurücksetzen.php'>password vergessen?</a>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
<?php include_once ("Datenbanken.php") ?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Anmelden</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 20px;
|
||||||
|
margin: 100px auto;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="email"], input[type="password"] {
|
||||||
|
padding: 10px;
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1p solid black;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-box">
|
||||||
|
<h1>Anmelden</h1>
|
||||||
|
<form method="post">
|
||||||
|
<label for="email">Email-Adresse:</label>
|
||||||
|
<input type="email" name="email" id="email" placeholder="Ihre Email-Adresse" required>
|
||||||
|
<label for="password">Passwort:</label>
|
||||||
|
<input type="password" name="password" id="password" placeholder="Ihr Passwort" required>
|
||||||
|
<input type="submit" name="submit" value="Anmelden"><br><br>
|
||||||
|
<?php include_once ("Anmelden quellcode.php") ?>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,378 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
<title>CSS-Einführung</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fragen p{
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box{
|
||||||
|
margin-left: 0.5em;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box code{
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.syntax {
|
||||||
|
color: chocolate;
|
||||||
|
}
|
||||||
|
.syntax img {
|
||||||
|
border-radius: 25px;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.syntax h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-left: -4em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.code-beispiele .selektor-absatz{
|
||||||
|
display:flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-beispiele .selektor-class{
|
||||||
|
display: flex;
|
||||||
|
justify-content: last baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-beispiele .selektor-absatz-in-class{
|
||||||
|
display: flex;
|
||||||
|
justify-content: last baseline;
|
||||||
|
}
|
||||||
|
.desc{
|
||||||
|
float: left;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.try{
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Einführung</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="CSS-Kurs-Subfiles/Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
<div class="fragen">
|
||||||
|
<h2>Was ist CSS?</h2>
|
||||||
|
<p><b>CSS</b> (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um den visuellen Stil von HTML-Elementen auf einer Webseite zu beschreiben.</p>
|
||||||
|
|
||||||
|
<h2>Was ist der Zweck von CSS?</h2>
|
||||||
|
<p>Der <b>Zweck</b> von CSS besteht darin, zu definieren, wie HTML-Elemente auf einer Webseite dargestellt werden sollen, z. B. ihre Farben, Schriftarten, ihr Layout und ihre Animationen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="implementieren">
|
||||||
|
<h2>Wie implementiert man CSS?</h2>
|
||||||
|
|
||||||
|
<strong style="margin-left: 0.5em;">Methode 1.)</strong> Styles in head einfügen<br>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Ich wollte IDs verwenden, um jeden <span> als Farbe zu identifizieren -->
|
||||||
|
<!-- aber das hat nicht funktioniert, deshalb gibt es so viel inline styling-->
|
||||||
|
<div class="code-box" >
|
||||||
|
<pre><code style="background-color: whitesmoke;display: inline-block"><<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
<span style="color: rgba(80,161,79,255)">body</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-family</span>: Arial, sans-serif;
|
||||||
|
<span style="color: rgba(80,161,79,255)">background-color</span>: <span style="color: rgba(195,149,62,255)">#f2f2f2</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
<span style="color: rgba(228,86,73,255)">h1</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: blue;
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: <span style="color: rgba(195,149,62,255)">24px</span>;
|
||||||
|
<span style="color: rgba(80,161,79,255)">text-align</span>: center;
|
||||||
|
}
|
||||||
|
</<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
</code></pre>
|
||||||
|
</div><br><br>
|
||||||
|
|
||||||
|
<strong style="margin-left: 0.5em;">Methode 2.)</strong> Laden aus einer Datei<br>
|
||||||
|
<div class="code-box">
|
||||||
|
|
||||||
|
<pre><code style="background-color: whitesmoke;display: inline-block"><<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">link</span> <span style="color: rgba(195,149,62,255)">rel</span>=<span style="color: rgba(80,161,79,255)">"stylesheet"</span> <span style="color: rgba(195,149,62,255)">type</span>=<span style="color: rgba(80,161,79,255)">"text/css"</span> <span style="color: rgba(195,149,62,255)">href</span>=<span style="color: rgba(80,161,79,255)">"styles.css"</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>></code></pre></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
<div class="syntax">
|
||||||
|
<h2>Syntax von CSS sieht so aus</h2>
|
||||||
|
<img src="Die Bilder/CSS Syntax.png" alt="CSS Syntax Foto">
|
||||||
|
</div><br>
|
||||||
|
<div class="code-beispiele">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
33333333333333333333333333333333333333333333
|
||||||
|
|
||||||
|
|
||||||
|
<div class="selektor-absatz">
|
||||||
|
<pre><code style="display: inline-block; background-color:whitesmoke"><<span style="color: rgba(228,86,73,255)">html</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">meta</span> charset="<span style="color: rgba(80,161,79,255)"><span style="color: rgba(80,161,79,255)">UTF-8</span></span>">
|
||||||
|
<<span style="color: rgba(228,86,73,255)">title</span>>CSS Beispiel</<span style="color: rgba(228,86,73,255)">title</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
/* Selektor für alle Absätze */
|
||||||
|
<span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: <span style="color: rgba(195,149,62,255)"><span style="color: rgba(195,149,62,255)">20px</span></span>;
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: blue;
|
||||||
|
}
|
||||||
|
</<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
|
||||||
|
<<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">h1</span>>CSS Beispiel</<span style="color: rgba(228,86,73,255)">h1</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">p</span>>Das ist ein Absatz.</<span style="color: rgba(228,86,73,255)">p</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">html</span>></code></pre>
|
||||||
|
<div class="desc">
|
||||||
|
<h3>Das ist ein Beispiel zum Bearbeiten eines Absatz-Tags</h3>
|
||||||
|
|
||||||
|
<b><i>So würde dieser Code als Webseite aussehen</b></i>
|
||||||
|
<div class="show">
|
||||||
|
<h1 style="font-size: larger;">CSS Beispiel</h1>
|
||||||
|
<span style="font-size: 16px!important;color: blue;">Das ist ein Absatz.</span>
|
||||||
|
</div><br>
|
||||||
|
<p style="margin-left: 0;">In diesem Beispiel wählen wir das zu bearbeitende Tag <b>p</b> aus,
|
||||||
|
ändern dann die Schriftgröße auf 20 Pixel und lassen die Farbe des Textes blau erscheinen.<br><br>
|
||||||
|
|
||||||
|
<p style="margin-left: 0; color: chocolate">Es ist gut zu wissen, dass Sie Kommentare in CSS mit <span style="background-color: whitesmoke;padding: 0 5px"><b><i>/* Kommentar */</i></b></span> hinterlassen können.</p>
|
||||||
|
<p style="margin-left: 0;margin-top: -0.75em; color: red">Beachten Sie, dass Sie bei Verwendung des <b><style></b> Tags dieses innerhalb eines <b><head></b> Tags einfügen müssen</p>
|
||||||
|
</p><a href="selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<div class="selektor-class">
|
||||||
|
<pre><code style="display: inline-block; background-color:whitesmoke"><<span style="color: rgba(228,86,73,255)">html</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">meta</span> charset="<span style="color: rgba(80,161,79,255)">UTF-8</span>">
|
||||||
|
<<span style="color: rgba(228,86,73,255)">title</span>>CSS Beispiel</<span style="color: rgba(228,86,73,255)">title</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
/* Selektor für ein Class */
|
||||||
|
<span style="color: rgba(195,149,62,255)">.mein-class</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: <span style="color: rgba(195,149,62,255)">20px</span>;
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: red;
|
||||||
|
}
|
||||||
|
</<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
|
||||||
|
<<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">h1</span>>CSS Beispiel</<span style="color: rgba(228,86,73,255)">h1</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">p</span> class="<span style="color: rgba(195,149,62,255)">mein-class</span>">Das ist ein Absatz.</<span style="color: rgba(228,86,73,255)">p</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">html</span>></code></pre>
|
||||||
|
<div class="desc">
|
||||||
|
<h3>Dies ist ein Beispiel für die Bearbeitung einer Klasse</h3>
|
||||||
|
<div class="show">
|
||||||
|
<h1 style="font-size: larger;">CSS Beispiel</h1>
|
||||||
|
<span style="font-size: 16px!important;color: red;">Das ist ein Absatz.</span>
|
||||||
|
</div>
|
||||||
|
<p style="margin-left: 0">In diesem Beispiel wählen wir statt eines <b>p</b> Tags eine Klasse namens „mein-class“ aus. <br><br>Wann immer wir nun einem Element die Eigenschaft von "mein-class" geben, hat dieses Element die CSS-Eigenschaften, die wir ihm zuweisen. <br><br>Auf diese Weise können wir mehreren Elementen genau das gleiche Styling geben.</p>
|
||||||
|
</p><a href="selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<div class="selektor-absatz-in-class">
|
||||||
|
<pre><code style="display: inline-block; background-color:whitesmoke"><<span style="color: rgba(228,86,73,255)">html</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">head</span> charset="UTF-8">
|
||||||
|
<<span style="color: rgba(228,86,73,255)">title</span>>CSS Beispeil</<span style="color: rgba(228,86,73,255)">title</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
/* Selektor für ein Absatz in ein Class */
|
||||||
|
<span style="color: rgba(228,86,73,255)"><span style="color: rgba(195,149,62,255)">.mein-class </span>p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: <span style="color: rgba(195,149,62,255)">20px</span>;
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: pink;
|
||||||
|
}
|
||||||
|
</<span style="color: rgba(228,86,73,255)">style</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
|
||||||
|
<<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">div</span> class="<span style="color: rgba(195,149,62,255)">mein-class</span>">
|
||||||
|
<<span style="color: rgba(228,86,73,255)">h1</span>>CSS Beispiel</<span style="color: rgba(228,86,73,255)">h1</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">p</span>>Das ist ein Absatz.</<span style="color: rgba(228,86,73,255)">p</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">div</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">body</span>>
|
||||||
|
</<span style="color: rgba(228,86,73,255)">html</span>></code></pre>
|
||||||
|
<div class="desc">
|
||||||
|
<h3>Dies ist ein Beispiel für die Bearbeitung eines Absatzes innerhalb einer Klasse</h3>
|
||||||
|
<div class="show">
|
||||||
|
<h1 style="font-size: larger;">CSS Beispiel</h1>
|
||||||
|
<span style="font-size: 16px!important;color: pink;">Das ist ein Absatz.</span>
|
||||||
|
</div>
|
||||||
|
<p style="margin-left: 0">In diesem Beispiel zielen wir speziell auf ein <b>p</b> Tag innerhalb einer <b>„mein-class“</b> Klasse ab.<br><br>
|
||||||
|
Dies bedeutet, dass kein anderes <b>p</b> oder irgendein anderes Element innerhalb der "mein-class" Klasse betroffen ist, abgesehen von einem <b>p</b>, das sich innerhalb dieser Klasse befindet.<br><br>
|
||||||
|
Damit können wir ein gründlicheres Styling üben.</p>
|
||||||
|
</p><a href="selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,263 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>CSS-Border</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile:hover .profile2 {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color: #01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 strong {
|
||||||
|
color: black;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-bottom: 1.2px solid gray
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderstyles {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderstyles p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.liste {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.liste {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box pre {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderstyles li,
|
||||||
|
.borderstyles p {
|
||||||
|
color: black;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderbeispiele {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
border-left: 5px solid red;
|
||||||
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderbeispiele span {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borderbeispiele p {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stileundcode {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-borders {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 1em;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper ul {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-left: 4px solid red;
|
||||||
|
padding: 5px 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Border</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
|
||||||
|
<p><b>CSS Margin</b></p>
|
||||||
|
<p>CSS Border(Rahmen) ist eine Eigenschaft, mit der Sie bearbeiten können, wie der Rahmen eines Elements aussieht</p>
|
||||||
|
<div class="border"></div>
|
||||||
|
<p>Der Rahmen eines Elements ist standardmäßig ausgeblendet, um ihn zu aktivieren, müssen Sie den Stil des gewünschten Rahmens festlegen!</p>
|
||||||
|
<div class="borderstyles">
|
||||||
|
<p>Dies sind Ihre Optionen</p>
|
||||||
|
<div class="liste">
|
||||||
|
<div class="stileundcode">
|
||||||
|
<ul>
|
||||||
|
<li>solid</li>
|
||||||
|
<li>dotted</li>
|
||||||
|
<li>dashed</li>
|
||||||
|
<li>double</li>
|
||||||
|
<li>hidden</li>
|
||||||
|
<li>none</li>
|
||||||
|
<li>ridge -»3D</li>
|
||||||
|
<li>groove -»3D</li>
|
||||||
|
<li>inset -»3D</li>
|
||||||
|
<li>outset -»3D</li>
|
||||||
|
</ul>
|
||||||
|
<div class="code-box">
|
||||||
|
|
||||||
|
<pre><code><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">border-style</span>: solid;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="borderbeispiele">
|
||||||
|
<p style="border-style: solid">Das ist ein <span>solid</span> border.</p>
|
||||||
|
<p style="border-style: dotted">Das ist ein <span>dotted</span> border.</p>
|
||||||
|
<p style="border-style: dashed">Das ist ein <span>dashed</span> border.</p>
|
||||||
|
<p style="border-style: double">Das ist ein <span>double</span> border.</p>
|
||||||
|
<p style="border-style: none">Das sind <span>hidden & none</span> borders.</p>
|
||||||
|
<p style="border-style: ridge">Das ist ein <span>ridge</span> border.</p>
|
||||||
|
<p style="border-style: groove">Das ist ein <span>groove</span> border.</p>
|
||||||
|
<p style="border-style: inset">Das ist ein <span>inset</span> border.</p>
|
||||||
|
<p style="border-style: outset">Das ist ein <span>outset</span> border.</p>
|
||||||
|
</div></div></div><a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important"></a>
|
||||||
|
<div class="border" style="margin-top:1em"></div>
|
||||||
|
<p>Ränder können mit <span style="color:red;background-color:whitesmoke">border-radius</span> gerundet werden.</p>
|
||||||
|
|
||||||
|
<div class="round-borders">
|
||||||
|
<div class="code-box"><pre><code style="display:inline-block; background-color: whitesmoke"><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">border-radius</span>: <span style="color: rgba(195,149,62,255)">15px</span>;
|
||||||
|
}</code></pre></div>
|
||||||
|
<div>
|
||||||
|
<p style="border: 1.2px solid black; border-radius: 15px; padding: 4px; display: inline-block!important">Das ist ein gerudenter border mit 15px.</p>
|
||||||
|
<p style="border: 1.2px solid black; border-radius: 10px; padding: 4px; display: inline-block!important">Das ist ein gerudenter border mit 10px.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Je höher der Wert, den Sie <span style="color:red;background-color:whitesmoke">border-radius</span> zuweisen, desto runder wird es.</p>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important"></a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Shicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,399 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
<title>CSS-Display</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-bottom: 1.2px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beispiele ul {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-left: 4px solid red;
|
||||||
|
padding: 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: lightseagreen;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 5em 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-content {
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-container p {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 2px 2px
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-container {
|
||||||
|
border: 1.2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-block-container {
|
||||||
|
border: 1.2px solid black
|
||||||
|
}
|
||||||
|
|
||||||
|
.none-content {
|
||||||
|
width: 90%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-content {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
border: 1.2px solid black;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inner-flex-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
background-color: aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-block {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-content {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: repeat(2, 100px);
|
||||||
|
grid-gap: 10px;
|
||||||
|
border: 1.2px solid black;
|
||||||
|
padding: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-block {
|
||||||
|
background-color: #ddd;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-content{
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
display: table;
|
||||||
|
width: 55%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-zeile {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell {
|
||||||
|
display: table-cell;
|
||||||
|
padding: 8px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Display</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
|
||||||
|
<p><b>CSS Display</b></p>
|
||||||
|
<div class="intro">
|
||||||
|
<p>Display wird verwendet, um das Layout einer Website zu steuern.</p>
|
||||||
|
<div class="beispiele">
|
||||||
|
<p style="margin-bottom: 0">Display hat 9 Werte:</p>
|
||||||
|
<ul style="margin-top: 0">
|
||||||
|
<li>block</li>
|
||||||
|
<li>inline & inline-block</li>
|
||||||
|
<li>none</li>
|
||||||
|
<li>inline-flex & flex</li>
|
||||||
|
<li>inline-grid & grid</li>
|
||||||
|
<li>table</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="name">BLOCK</div>
|
||||||
|
<div class="block">
|
||||||
|
<div class="content">
|
||||||
|
<div class="block-content">
|
||||||
|
<p>Block ist der Standardwert für das Eigenschaft <span>display</span>.</p>
|
||||||
|
<p><span>Block</span> Elementen werden untereinander gestapelt und nehmen so viel Platz wie möglich in ihrem übergeordneten Container ein.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="block-container">
|
||||||
|
<p style="background-color: aquamarine;">Das ist ein Absatz mit <span>display: block</span></p>
|
||||||
|
<p style="background-color:#01d28e;">Das ist ein Absatz mit <span>display: block</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">INLINE & INLINE-BLOCK</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="inline-block-content">
|
||||||
|
<p><span>inline</span>-Elemente werden in der gleichen Zeile angezeigt und nehmen nur so viel Platz wie nötig ein, können aber nicht durch <span>width, margin, padding usw.</span> manipuliert werden.</p>
|
||||||
|
<p><span>inline-block</span>-Elemente werden ebenfalls in derselben Zeile angezeigt, nehmen aber so viel Platz wie möglich ein.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="inline-block-container">
|
||||||
|
<p>Das ist ein Beispiel Satz mit einem <span style="display: inline">inline element</span> und einem <span style="display: inline-block; margin-left: 10px">inline-block</span> element mit <span>margin-left: 10px</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">NONE</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="none-content">
|
||||||
|
<p>Elemente mit <span>display: none</span> werden einfach nicht angezeigt.</p>
|
||||||
|
<p>Diese Option wird oft mit Javascript kombiniert, um ein Element beim Klicken auf einer Button anzuzeigen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">INLINE-FLEX & FLEX</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="flex-content">
|
||||||
|
<p>Ein Element mit <span>display: flex</span> (normalerweise ein div) ermöglicht, dass sein untergeordnetes Elementen im gesamten Container flexibel gestreckt/geschrumpft/beabstandet/positioniert werden kann.</p>
|
||||||
|
<p>Ein Element mit <span>display: inline-flex</span> macht dasselbe wie normales flex, nutzt aber nur die minimale Breite.</p>
|
||||||
|
<p style="background-color: whitesmoke; display: inline-block; padding: 15px">In beiden Beispielen sind alle 3 Blöcke auf <span>raumgleich(space-evenly)</span> eingestellt</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-container">
|
||||||
|
<p style="margin: 0; text-align: center; padding: 5px"><span>display: flex</span></p>
|
||||||
|
<div class="inner-flex-container">
|
||||||
|
<div class="flex-block">Block 1</div>
|
||||||
|
<div class="flex-block">Block 2</div>
|
||||||
|
<div class="flex-block">Block 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="border" style="margin-top: 1.25em"></div>
|
||||||
|
<p style="margin: 0; text-align: center"><span>display: inline-flex</span></p>
|
||||||
|
<div class="inner-flex-container" style="display:inline-flex!important;margin-top: 1em;">
|
||||||
|
<div class="flex-block">Block 1</div>
|
||||||
|
<div class="flex-block">Block 2</div>
|
||||||
|
<div class="flex-block">Block 3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">INLINE-GRID & GRID</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="grid-content">
|
||||||
|
<p><span>Grid</span> wird verwendet, um zweidimensionale Layouts zu erstellen, in denen Sie angeben können, wie viele Zeilen und Spalten Sie möchten.</p>
|
||||||
|
<p>Es kann verwendet werden, um alles von einfachen bis zu äußerst komplexen Layouts zu erstellen.</p>
|
||||||
|
<p style="margin-top:1em; padding: 15px; background-color: whitesmoke; margin-left: 1em">In diesem Beispiel gibt es 3 Spalten mit 2 Elementen mit einer Lücke(gap) von 10 Pixeln.<br>Wenn wir stattdessen <span>inline-grid</span> einfügen würden, wäre die einzige Änderung, dass die Blöcke die Breite des Textes hätten.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid-container">
|
||||||
|
<div class="grid-block">Block 1</div>
|
||||||
|
<div class="grid-block">Block 2</div>
|
||||||
|
<div class="grid-block">Block 3</div>
|
||||||
|
<div class="grid-block">Block 4</div>
|
||||||
|
<div class="grid-block">Block 5</div>
|
||||||
|
<div class="grid-block">Block 6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">TABLE</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="table-content">
|
||||||
|
<p>Mit <span>display: table</span> können Sie Tabellen erstellen, die mit den HTML-Tabellen-Tags identisch sind.</p>
|
||||||
|
<p>Dies ist nützlich, wenn Sie eine reaktivere Tabelle erstellen müssen.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="table-container">
|
||||||
|
<div class="table-zeile">
|
||||||
|
<div class="table-cell">Zeile 1, Spalte 1</div>
|
||||||
|
<div class="table-cell">Zeile 1, Spalte 2</div>
|
||||||
|
<div class="table-cell">Zeile 1, Spalte 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-zeile">
|
||||||
|
<div class="table-cell">Zeile 2, Spalte 1</div>
|
||||||
|
<div class="table-cell">Zeile 2, Spalte 2</div>
|
||||||
|
<div class="table-cell">Zeile 2, Spalte 3</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-zeile">
|
||||||
|
<div class="table-cell">Zeile 3, Spalte 1</div>
|
||||||
|
<div class="table-cell">Zeile 3, Spalte 2</div>
|
||||||
|
<div class="table-cell">Zeile 3, Spalte 3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,295 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>CSS-Farben</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.farben {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.farben li {
|
||||||
|
margin-right: 5px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.farben-beispiele {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.farben-beispiele ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0.14em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.farben-beispiele li {
|
||||||
|
color: white;
|
||||||
|
width: 15em;
|
||||||
|
height: 3em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 0.14em;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box pre{
|
||||||
|
background-color: whitesmoke;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-2{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.container-2 p{
|
||||||
|
border: 1.5px solid black;
|
||||||
|
margin-left: 2.7em;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Einführung</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
|
||||||
|
<h2>Farben können auf 6 Arten ausgewählt werden.</h2>
|
||||||
|
|
||||||
|
<ul class="farben">
|
||||||
|
<li>Namen,</li>
|
||||||
|
<li>RGB,</li>
|
||||||
|
<li>RGBA,</li>
|
||||||
|
<li>HEX,</li>
|
||||||
|
<li>HSL,</li>
|
||||||
|
<li>HSLA,</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style="margin-left: 2.2em;">so werden sie verwendet</div>
|
||||||
|
<div class="farben-beispiele">
|
||||||
|
<ul>
|
||||||
|
<li style="background-color: red">red</li>
|
||||||
|
<li style="background-color: rgb(255,0,0)">rgb(255, 0, 0)</li>
|
||||||
|
<li style="background-color: rgba(255,0,0,1)">rgba(255, 0, 0, 1)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="farben-beispiele">
|
||||||
|
<ul>
|
||||||
|
<li style="background-color: #FF0000">#FF0000</li>
|
||||||
|
<li style="background-color: hsl(0, 100%, 50%)">hsl(0, 100%, 50%)</li>
|
||||||
|
<li style="background-color: hsla(0, 100%, 50%, 1)">hsla(0, 100%, 50%, 1)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="farben-beispiele">
|
||||||
|
<ul>
|
||||||
|
<li style="background-color: blue">blue</li>
|
||||||
|
<li style="background-color: rgb(0,0,255)">rgb(0, 0, 255)</li>
|
||||||
|
<li style="background-color: rgba(0,0,255, 1)">rgba(0, 0, 255, 1)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="farben-beispiele">
|
||||||
|
<ul>
|
||||||
|
<li style="background-color: #0000ff">#0000FF</li>
|
||||||
|
<li style="background-color: hsl(240, 100%, 50%)">hsl(240, 100%, 50%)</li>
|
||||||
|
<li style="background-color: hsla(240, 100%, 50%, 1)">hsla(240, 100%, 50%, 1)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<br><br><br>
|
||||||
|
|
||||||
|
Hier sind ein paar Beispiele, wie Sie Farben in CSS verwenden können.<br>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div style="margin-top: 1em; margin-left: 1em">
|
||||||
|
<b>Text Farben</b>
|
||||||
|
<br>
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: blue;
|
||||||
|
}</code></pre>
|
||||||
|
</div><br>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 10px!important"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 1em; margin-left: 1em">
|
||||||
|
<b>Hintergrund Farben</b>
|
||||||
|
<br>
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">background-color</span>: blue;
|
||||||
|
}</code></pre>
|
||||||
|
</div><br>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 10px!important; margin-left: 4em;"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 1em; margin-left: 1em">
|
||||||
|
<b>Border Farben</b>
|
||||||
|
<br>
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">div</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">border-color</span>: blue;
|
||||||
|
}</code></pre>
|
||||||
|
</div><br>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 10px!important; margin-left: 2.5em"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-2">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p style="color: blue">Text</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div style="margin-left: 5.7em">
|
||||||
|
<p style="background-color: blue">Text</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-left: 6.5em">
|
||||||
|
<span >
|
||||||
|
<p style="border-color: blue">Text</p>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,298 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>CSS-Fonts</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
.intro ul {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#import p {
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#import {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box pre {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-bottom: 1.2px solid gray;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: lightseagreen;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 5em 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f1 {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.25;
|
||||||
|
border: 1.2px solid;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f2 {
|
||||||
|
font-size: 26px;
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f2_ {
|
||||||
|
font-size: 36px;
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#f3 {
|
||||||
|
text-decoration: underline;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Fonts</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
|
||||||
|
<p><b>CSS Fonts(Schriftart)</b></p>
|
||||||
|
<div class="intro">
|
||||||
|
<p style="margin-bottom: 0;">Schriftarten können verwendet werden, um die Schriftart eines Textes, die Schriftgröße selbst und die Art und Weise, wie Text angezeigt wird, zu ändern.</p>
|
||||||
|
<p style="margin-top: 0">Die Standardschriftart variiert je nach der Browser, aber die häufigste ist <span>Arial</span> mit einer Größe von <span>16px</span></p>
|
||||||
|
|
||||||
|
<p style="margin-bottom: 0; margin-top: 2em;">Bei der Auswahl von Schriftarten sollten Sie immer Folgendes beachten.</p>
|
||||||
|
<ul style="margin-top: 0">
|
||||||
|
<li><span><b>Verfügbarkeit</b></span> - Ist die Schriftart auf den meisten Geräten verfügbar oder wird sie <a href="#import">importiert</a>?</li>
|
||||||
|
<li><span><b>Lesbarkeit</b></span> - Ist die Schriftart gut lesbar?</li>
|
||||||
|
<li><span><B>Aussehen</B></span> - Stimmt es mit dem Stil der Seite überein?</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="import">
|
||||||
|
<p>Sie können Schriftarten verwenden, die auf dem Gerät des Benutzers nicht verfügbar sind, indem Sie sie aus dem Internet importieren.</p>
|
||||||
|
<p>Die gängigste Methode zum Importieren von Schriftarten ist über Google Fonts.</p>
|
||||||
|
<p>Dies kann durch Einfügen eines <span>link href</span> als <span>stylesheet</span> in den <head> tag.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="code-box" >
|
||||||
|
<pre style="border-left: 1px solid black;"><code><<span style="color: rgba(228,86,73,255)">head</span>>
|
||||||
|
<<span style="color: rgba(228,86,73,255)">link</span> <span style="color: rgba(195,149,62,255)">href</span>="<span style="color: rgba(80,161,79,255)">https://fonts.googleapis.com/css2?family=Roboto&display=swap</span>" <span style="color: rgba(195,149,62,255)">rel</span>="<span style="color: rgba(80,161,79,255)">stylesheet</span>">
|
||||||
|
</<span style="color: rgba(228,86,73,255)">head</span>></code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="name">SCHRIFTART AUSWÄHLEN</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">body</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-family</span>: '<span style="color: rgba(80,161,79,255)">Roboto</span>', sans-serif;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p id="f1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||||
|
</div>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank" id="selbst_versuch"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important"></a>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">SCHRIFTGRÖSSEN ANGEBEN</div>
|
||||||
|
<div class="content" style="padding-bottom:0!important">
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">body</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: 26px;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
<p id="f2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||||
|
</div>
|
||||||
|
<div class="content" style="padding: 0!important">
|
||||||
|
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">body</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-size</span>: <span style="color: rgba(195,149,62,255)">36px</span>;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
<p id="f2_">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||||
|
</div>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank" id="selbst_versuch"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important"></a>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">TEXT GESTALTEN</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">body</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">text-decoration</span>: underline;
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-style</span>: italic;
|
||||||
|
<span style="color: rgba(80,161,79,255)">font-weight</span>: bold;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
<p id="f3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||||
|
</div>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank" id="selbst_versuch"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important"></a>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,258 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>CSS-Margin</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile:hover .profile2 {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color: #01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 strong {
|
||||||
|
color: black;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code-box pre {
|
||||||
|
padding: 10px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shorthand ul {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shorthand span {
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shorthand li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#oben {
|
||||||
|
background-color: aquamarine;
|
||||||
|
}
|
||||||
|
|
||||||
|
#unten {
|
||||||
|
background-color: cadetblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#rechts {
|
||||||
|
background-color: burlywood;
|
||||||
|
}
|
||||||
|
|
||||||
|
#links {
|
||||||
|
background-color: chocolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper ul {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-left: 4px solid red;
|
||||||
|
padding: 5px 25px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Margin</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
<div style="border-bottom: 1.2px solid gray; margin-bottom: 1em">
|
||||||
|
<p><b>CSS Margin</b></p>
|
||||||
|
<p>Margin bezieht sich auf den Abstand zwischen dem Inhalt eines HTML-Elements und dem Rand, der es umgibt.
|
||||||
|
Margin wird verwendet, um manuell einen Abstand zwischen Elementen zu setzen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p>Der Margin wird standardmäßig auf alle Seiten eines Elements angewendet.<br>
|
||||||
|
Das bedeutet, dass <span style="color:orange;background-color:whitesmoke">margin: 10px</span> wird 10 Pixel Abstand von jeder Seite des Elements machen, auf das es angewendet wird.
|
||||||
|
</p>
|
||||||
|
Der Margin kann auf bestimmten Seiten geändert werden. Dies geschieht mit den folgenden Eigenschaften:
|
||||||
|
<br><ul style="list-style-type: square; color:orange;">
|
||||||
|
<li>margin-top: 10px</li>
|
||||||
|
<li>margin-bottom: 10px</li>
|
||||||
|
<li>margin-left: 10px</li>
|
||||||
|
<li>margin-left: 10px</li>
|
||||||
|
</ul>
|
||||||
|
<br><a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important;margin-top: -0.6em"></a>
|
||||||
|
|
||||||
|
<br><br>Margin Eigenschaften konnen die Folgende Werte haben:<br>
|
||||||
|
<ul>
|
||||||
|
<li><i>länge</i> <b>»</b> 1px || 1em || 1cm usw.</li>
|
||||||
|
<li><i>auto</i> <b>»</b> Automatisch von der Browser berechnet.</li>
|
||||||
|
<li><i>prozent</i> <b>»</b> Ein Prozent der Breite des Elements.</li>
|
||||||
|
<li><i>erben(inherit)</i> <b>»</b> Der Margin sollte durch das übergeordnete Element festgelegt werden.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div style="width:100%; border-bottom: 1.2px solid gray; margin-top: 10px"></div>
|
||||||
|
<p style="margin:0"><br>Der folgende Code würde so aussehen:</p>
|
||||||
|
<p style="margin-top: 0; ">Der <span style="background-color:cyan!important;color:black; border-radius: 5px; padding: 1.3px 8px">blauen Bereich</span> ist der margin</p><br>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: red;
|
||||||
|
<span style="color: rgba(80,161,79,255)">margin</span>: <span style="color: rgba(195,149,62,255)">50px</span>;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="color:red; border: 1.2px solid black; display: flex; justify-content: center; align-items: center;margin-left: 1em; background-color: cyan">
|
||||||
|
<p style="margin:50px;background-color:white">auf diesen Text wird ein margin angewendet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="code-box">
|
||||||
|
<pre><code class="css"><span style="color: rgba(228,86,73,255)">p</span> {
|
||||||
|
<span style="color: rgba(80,161,79,255)">color</span>: red;
|
||||||
|
<span style="color: rgba(80,161,79,255)">margin-left</span>: <span style="color: rgba(195,149,62,255)">50px</span>;
|
||||||
|
}</code></pre>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="color:red; border: 1.2px solid black; display: flex; justify-content: center; align-items: center;background-color: cyan; margin: 1em 0 0 1em;">
|
||||||
|
<p style="background-color:white; margin:0;margin-left: 50px;max-width:100%;">auf diesen Text wird ein margin-left angewendet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="../selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst" style="padding: 8px!important;margin-top: -0.6em"></a>
|
||||||
|
<div style="width:100%; border-bottom: 1.2px solid gray; margin-top: 10px"></div>
|
||||||
|
|
||||||
|
<p>Es gibt auch eine Kurzversion des Margins, die auf Seiten angewendet werden kann.
|
||||||
|
Kurzversionen ermöglichen es uns, der Margin für alle Seiten schnell festzulegen, auch wenn sie nicht gleich sind.</p>
|
||||||
|
<div class="shorthand">
|
||||||
|
<p>Es gibt 2 Kurzversionen, die Sie verwenden können</p>
|
||||||
|
<ul style="margin-top:0!important">
|
||||||
|
<li>margin: <span id="oben">oben</span> <span id="rechts">rechts</span> <span id="links">links</span> <span id="unten">unten</span></li>
|
||||||
|
<li>margin: <span id="oben">oben/unten</span> <span id="rechts">links/rechts</span> </li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>In Aktion würde es so aussehen</p>
|
||||||
|
<ul style="margin-top:0!important">
|
||||||
|
<li>margin: <span id="oben">10px</span> <span id="rechts">5px</span> <span id="links">12px</span> <span id="unten">20px</span></li>
|
||||||
|
<li>margin: <span id="oben">1em</span> <span id="rechts">2em</span> </li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,396 @@
|
||||||
|
<?php include("../Datenbanken.php");?>
|
||||||
|
<?php include_once ("../Schicke Nachricht.php");?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="../CSS/für den CSS-Kurs.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>CSS-Position</title>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.navbar.profile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile:hover .profile2 {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color: #01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #ffffff !important;
|
||||||
|
border-radius: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2 strong {
|
||||||
|
color: black;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-bottom: 1.2px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
span{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beispiele ul {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border-left: 4px solid red;
|
||||||
|
padding: 5px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin-top: 10px;
|
||||||
|
text-align: center;
|
||||||
|
color: lightseagreen;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 5em 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
.content {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.content-beispiel {
|
||||||
|
border: 1.2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abs-container {
|
||||||
|
position: relative;
|
||||||
|
width: 150px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.abs-container img {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.abs-content {
|
||||||
|
position: relative;
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: relative;
|
||||||
|
left: -11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rel-content {
|
||||||
|
position: relative;
|
||||||
|
width: 35%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rel-container {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border: 1.2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative;
|
||||||
|
left: -7.9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rel-container img {
|
||||||
|
position: relative;
|
||||||
|
left: 100px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.scroll-box {
|
||||||
|
height: 150px;
|
||||||
|
width: 400px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
scrollbar-gutter: stable both-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-box::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
height: 155px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-box::-webkit-scrollbar-thumb {
|
||||||
|
background-color: gray;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.fix-container {
|
||||||
|
background-color: whitesmoke;
|
||||||
|
border: 1.2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix-content {
|
||||||
|
width: 35%;
|
||||||
|
left: -11%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sticky-text {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
padding: 10px 0;
|
||||||
|
background-color: aquamarine!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sti-container {
|
||||||
|
border: 1.2px solid black;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
position: relative;
|
||||||
|
left: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sti-content {
|
||||||
|
position: relative;
|
||||||
|
width: 37.5%;
|
||||||
|
left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS-Position</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="../Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="../Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="../konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="../Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="../Die Bilder/CSS.png" alt="CSS Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="../CSS-Einführung.php"><li>CSS - Einführung</li></a>
|
||||||
|
<a href="Farben.php"><li>CSS - Farben</li></a>
|
||||||
|
<a href="Margin.php"><li>CSS - Margin</li></a>
|
||||||
|
<a href="Border.php"><li>CSS - Border</li></a>
|
||||||
|
<a href="Position.php"><li>CSS - Position</li></a>
|
||||||
|
<a href="Display.php"><li>CSS - Display</li></a>
|
||||||
|
<a href="Font.php"><li>CSS - Font</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
|
||||||
|
<p><b>CSS Position</b></p>
|
||||||
|
<div class="intro">
|
||||||
|
<p>Die Positionseigenschaft gibt an, wie ein Element positioniert wird.</p>
|
||||||
|
<p>Der Standardwert für Position ist <span>static</span>.</p>
|
||||||
|
<p style="margin-bottom: 1em">Um <span>position</span> zu nutzen, verwenden Sie `<span>left</span>, <span>right</span>, <span>top</span> und <span>bottom</span>` eigenschaften.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="beispiele">
|
||||||
|
<p style="margin-bottom: 0">Position hat 5 Werte:</p>
|
||||||
|
<ul style="margin-top: 0">
|
||||||
|
<li>static</li>
|
||||||
|
<li>absolute</li>
|
||||||
|
<li>relative</li>
|
||||||
|
<li>fixed</li>
|
||||||
|
<li>sticky</li>
|
||||||
|
</ul></div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="name">STATIC</div>
|
||||||
|
<div class="content">
|
||||||
|
<div>
|
||||||
|
<p style="margin:0">Static ist der Standardwert.</p>
|
||||||
|
<p style="margin:0">Es wird nichts geändert.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="content-beispiel">Das ist eine <span>static</span> Position.</div>
|
||||||
|
</div>
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">RELATIVE</div>
|
||||||
|
<div class="relative">
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<div class="rel-content">
|
||||||
|
<span>position: relative</span> positioniert das Element relativ zu seiner Standardposition auf der Seite.
|
||||||
|
<p>Das schwarze Dreieck wird mit <span>left: 100px</span> 100px links von der linken Seite positioniert.</p>
|
||||||
|
<p>Standardmäßig wird es unten links im grauen Feld positioniert.</p>
|
||||||
|
</div>
|
||||||
|
<div class="rel-container">
|
||||||
|
<p style="margin:0">Das ist eine <span>relative</span> Position</p>
|
||||||
|
<img src="../Die Bilder/Position_Bild.png" alt="Bild..." width="150" height="150">
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="name">ABSOLUTE</div>
|
||||||
|
<div class="absolute">
|
||||||
|
<div class="content">
|
||||||
|
<div class="abs-content">
|
||||||
|
Das Bild eines schwarzen Dreiecks wird absolut innerhalb eines <span>relativen</span> Containers mit einem <span>links: 50px</span> positioniert.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="abs-container">
|
||||||
|
<p style="margin:0">Das ist eine <span>absolute</span> Position</p>
|
||||||
|
<img src="../Die Bilder/Position_Bild.png" alt="Bild..." width="150" height="150">
|
||||||
|
</div>
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="name">FIXED</div>
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<div class="fix-content">
|
||||||
|
<p>Ein Element mit <span>position: fixed</span> bleibt an der gleichen Position, auch wenn der Benutzer von seiner ursprünglichen Position wegscrollt.</p>
|
||||||
|
</div>
|
||||||
|
<div class="fix-container">
|
||||||
|
<div>
|
||||||
|
<div style="background-color: aquamarine!important; padding: 10px 0;"><span>Das ist eine fixed position</span></div>
|
||||||
|
<div class="scroll-box">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit odio et nisi interdum lacinia. Suspendisse nec vestibulum est. Proin consectetur auctor turpis, vel malesuada sapien volutpat vel. Nullam eu velit eu ex finibus pulvinar. Vestibulum in enim in ex feugiat luctus. Sed id massa id augue scelerisque bibendum. Sed malesuada, odio sit amet hendrerit placerat, tellus tortor venenatis diam, a volutpat leo ante vel magna.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit odio et nisi interdum lacinia. Suspendisse nec vestibulum est. Proin consectetur auctor turpis, vel malesuada sapien volutpat vel. Nullam eu velit eu ex finibus pulvinar. Vestibulum in enim in ex feugiat luctus. Sed id massa id augue scelerisque bibendum. Sed malesuada, odio sit amet hendrerit placerat, tellus tortor venenatis diam, a volutpat leo ante vel magna.</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit odio et nisi interdum lacinia. Suspendisse nec vestibulum est. Proin consectetur auctor turpis, vel malesuada sapien volutpat vel. Nullam eu velit eu ex finibus pulvinar. Vestibulum in enim in ex feugiat luctus. Sed id massa id augue scelerisque bibendum. Sed malesuada, odio sit amet hendrerit placerat, tellus tortor venenatis diam, a volutpat leo ante vel magna.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="border"></div>
|
||||||
|
|
||||||
|
<div class="name">STICKY</div>
|
||||||
|
<div class="content">
|
||||||
|
|
||||||
|
<div class="sti-content">
|
||||||
|
Ein Element mit <span>position: sticky</span> wird statisch angezeigt, bis der Benutzer unter das Element scrollt, wo es am oberen Rand des übergeordneten Containers haftet.
|
||||||
|
</div>
|
||||||
|
<div class="sti-container">
|
||||||
|
<div class="inner-container">
|
||||||
|
<div class="scroll-box">
|
||||||
|
|
||||||
|
<div class="inner-content">
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p class="sticky-text">Das ist eine sticky position</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="Schicken"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header img{
|
||||||
|
width: auto;
|
||||||
|
height: 500px;
|
||||||
|
border-radius: 2%;
|
||||||
|
border: 1px solid black;
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main p{
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
text-align: justify;
|
||||||
|
margin-left: 26%;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
color: #2c3e50;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
background-color: #1c862d;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
|
margin-left: 26%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #2980b9;
|
||||||
|
}
|
||||||
|
.main button a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: white
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.row {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.navbar a {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,222 @@
|
||||||
|
/*Formatierung der Seiten des CSS Kurses */
|
||||||
|
/* Die ganze Seite */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
/* Der Körper der Seite */
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*Der Header */
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 33px;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
/*Der Überschrift*/
|
||||||
|
.header h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-right: 30%;
|
||||||
|
}
|
||||||
|
/* Die Listen unter dem Header*/
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.navbar a:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.navbar a {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.überuns:hover .info{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
.kontakt{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.kontakt:hover .kontakt{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
.material-icons{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
/* Die Listen neben dem Körper der Seite*/
|
||||||
|
.Zeile {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.Zeile {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 600px) {
|
||||||
|
.lists li a {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seite {
|
||||||
|
-ms-flex: 30%;
|
||||||
|
flex: 30%;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 20px;
|
||||||
|
margin-left: -1.5em;
|
||||||
|
}
|
||||||
|
.seite2 {
|
||||||
|
max-width: 80%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.lists{
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.lists li {
|
||||||
|
list-style: none;
|
||||||
|
color: black;
|
||||||
|
line-height: 50px;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align:justify;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.lists a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/* Der Körper */
|
||||||
|
.körper {
|
||||||
|
flex: 70%;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
/* Die Footer der Seite*/
|
||||||
|
.footer {
|
||||||
|
padding: 20px;
|
||||||
|
text-justify: auto;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
.footer p ,h1,textarea {
|
||||||
|
margin-left: 30%;
|
||||||
|
}
|
||||||
|
.footer p input,textarea{
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
outline: none;
|
||||||
|
appearance: unset !important;
|
||||||
|
-moz-appearance: unset !important;
|
||||||
|
-webkit-appearance: unset !important;
|
||||||
|
-o-appearance: unset !important;
|
||||||
|
-ms-appearance: unset !important;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.copyright p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.copyright{
|
||||||
|
background-color: rgb(144, 152, 162);
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.send {
|
||||||
|
border: 0 solid #e5e7eb;
|
||||||
|
border-radius: .5rem;
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.try{
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,310 @@
|
||||||
|
|
||||||
|
/*Formatierung der Seiten des HTML Kurses */
|
||||||
|
|
||||||
|
/* Die ganze Seite */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
/* Der Körper der Seite */
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*Der Header */
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 33px;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
/*Der Überschrift*/
|
||||||
|
.header h1 {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-right: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Die Listen unter dem Header*/
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.navbar a:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.navbar a {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.überuns:hover .info{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
.kontakt{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.kontakt:hover .kontakt{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
.material-icons{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Die Listen neben dem Körper der Seite*/
|
||||||
|
.Zeile {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.Zeile {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.seite {
|
||||||
|
-ms-flex: 30%;
|
||||||
|
flex: 30%;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.seite2 {
|
||||||
|
width: 60%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.lists{
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.lists li {
|
||||||
|
list-style: none;
|
||||||
|
color: black;
|
||||||
|
line-height: 50px;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align:justify;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.lists a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/* Der Körper */
|
||||||
|
.körper {
|
||||||
|
flex: 70%;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
/* Die Footer der Seite*/
|
||||||
|
.footer {
|
||||||
|
padding: 20px;
|
||||||
|
text-justify: auto;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
.footer p ,h1,textarea {
|
||||||
|
margin-left: 30%;
|
||||||
|
}
|
||||||
|
.footer p input,textarea{
|
||||||
|
border: 1px solid #ebebeb;
|
||||||
|
outline: none;
|
||||||
|
appearance: unset !important;
|
||||||
|
-moz-appearance: unset !important;
|
||||||
|
-webkit-appearance: unset !important;
|
||||||
|
-o-appearance: unset !important;
|
||||||
|
-ms-appearance: unset !important;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.copyright p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.copyright{
|
||||||
|
background-color: rgb(144, 152, 162);
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send {
|
||||||
|
border: 0 solid #e5e7eb;
|
||||||
|
border-radius: .5rem;
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 24px;
|
||||||
|
margin: 0;
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: -6px 8px 10px rgba(81,41,10,0.1),0px 2px 2px rgba(81,41,10,0.2);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* die Inhalt der Seiten */
|
||||||
|
|
||||||
|
.körper h2{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.körper p{
|
||||||
|
width: 80%;
|
||||||
|
color: rgb(82, 82, 82);
|
||||||
|
|
||||||
|
}
|
||||||
|
.körper img{
|
||||||
|
border: 1px solid black;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.try{
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.weiter{
|
||||||
|
text-decoration: none;
|
||||||
|
color:black;
|
||||||
|
border: 1px solid black;
|
||||||
|
font-size: larger;
|
||||||
|
font-weight: 100;
|
||||||
|
padding: 10px;
|
||||||
|
margin-left: -8px;
|
||||||
|
border-radius: .5rem;
|
||||||
|
|
||||||
|
background-color:#f4f4f4;
|
||||||
|
}
|
||||||
|
.table{
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
.table td{
|
||||||
|
font-size: 15px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.table tr td{
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
}
|
||||||
|
th{
|
||||||
|
font-size: 20px;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
.table .ts{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table tr td b,p{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.main ul{
|
||||||
|
width: 80%;
|
||||||
|
margin-left: 20px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.lists{
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin-top: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.lists li {
|
||||||
|
list-style: none;
|
||||||
|
color: black;
|
||||||
|
line-height: 50px;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align:justify;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
.lists a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.code{
|
||||||
|
background-color: rgb(230, 230, 230);
|
||||||
|
margin-right: 10%;
|
||||||
|
width: 60%;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,235 @@
|
||||||
|
/*Formatierung der Seite Homepage */
|
||||||
|
|
||||||
|
/* Die ganze Seite */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Der Körper der Seite */
|
||||||
|
body {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Der Header */
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #282A35!important;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
/*Der Absatz im Header */
|
||||||
|
.header p{
|
||||||
|
color: #FFC0C7;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 30px!important;
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*Der Überschrift*/
|
||||||
|
.header h1 {
|
||||||
|
font-size: 70px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Die Listen unter dem Header*/
|
||||||
|
.navbar {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #b2e6d3;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
color: black;
|
||||||
|
text-align: center;
|
||||||
|
padding: 14px 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.navbar a:hover {
|
||||||
|
background-color: rgb(128, 204, 13);
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.navbar a {
|
||||||
|
float: none;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: none;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.überuns:hover .info{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kontakt{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kontakt:hover .kontakt{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 40%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
margin-right: 30%;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icons{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||||
|
justify-content: center !important;
|
||||||
|
align-items: center !important;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Die Listen neben dem Körper der Seite */
|
||||||
|
.zeile {
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seite {
|
||||||
|
-ms-flex: 30%;
|
||||||
|
flex: 30%;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.zeile {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Der Körper */
|
||||||
|
.körper .css{
|
||||||
|
margin-top: 400px;
|
||||||
|
background-color: #FFF4A3!important;
|
||||||
|
padding: 10px;
|
||||||
|
height: 48.6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper .css .beispiel{
|
||||||
|
width: 35%;
|
||||||
|
float:right;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper {
|
||||||
|
-ms-flex: 70%;
|
||||||
|
flex: 70%;
|
||||||
|
float: left;
|
||||||
|
background-color:#D9EEE1!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper h1{
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
.körper p{
|
||||||
|
margin-left: 40px;
|
||||||
|
font-weight:bolder;
|
||||||
|
|
||||||
|
}
|
||||||
|
.körper .lerne{
|
||||||
|
margin-top: 40px;
|
||||||
|
background-color: #04AA6D;
|
||||||
|
color: white;
|
||||||
|
font-size: 22px;
|
||||||
|
width: 200px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 70px;
|
||||||
|
outline-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-weight: bolder;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.beispiel .try {
|
||||||
|
margin-top: 20px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: white;
|
||||||
|
padding: 15px 32px;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper .beispiel{
|
||||||
|
float: right;
|
||||||
|
background-color: #E7E9EB;
|
||||||
|
margin-right: 100px;
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.körper .beispiel .code{
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 15px;
|
||||||
|
border-left: #04AA6D 10px solid;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Die Footer */
|
||||||
|
.footer {
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
body {
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 20px;
|
||||||
|
margin: 100px auto;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
margin-left: 2.375em;
|
||||||
|
}
|
||||||
|
|
||||||
|
form label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container .textInput {
|
||||||
|
padding: 10px;
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1p solid black;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container label {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container input[type="text"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container input[type="date"] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container label span {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: #FFFFFF;
|
||||||
|
padding: 10px 126px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"]:hover{
|
||||||
|
background-color: #3f7c41;
|
||||||
|
}
|
||||||
|
.gender {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender .rest{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gender .rest input {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.genlab {
|
||||||
|
margin-left: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<?php
|
||||||
|
$server="mysql:host=localhost;dbname=anmelden";
|
||||||
|
$user="root";
|
||||||
|
$pw="";
|
||||||
|
|
||||||
|
$dbh= new PDO($server,$user,$pw);
|
||||||
|
if(!$dbh){
|
||||||
|
echo "Verbindung Fehlgeschlagen";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
body{
|
||||||
|
font-family: arial;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
input[type='text']{
|
||||||
|
width: 50%;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
}
|
||||||
|
input[type='number']{
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 3px #f4f4f4 solid;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
border-top: 3px #f4f4f4 solid ;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
a.start{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.current{
|
||||||
|
padding: 10px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
border: #ccc dotted 1px;
|
||||||
|
margin: 20px 0 10px 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width:960px){
|
||||||
|
.container{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.submit{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.container .zertifikat{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
$server="mysql:host=localhost;dbname=quiz_fragen_css";
|
||||||
|
$user="root";
|
||||||
|
$pw="";
|
||||||
|
|
||||||
|
$dbh= new PDO($server,$user,$pw);
|
||||||
|
if(!$dbh){
|
||||||
|
echo "Verbindung Fehlgeschlagen";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<?php include 'datenbanken.php';?>
|
||||||
|
<?php session_start();?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Frage Nummer (Default=1)
|
||||||
|
$nummer = (int) $_GET['n'];
|
||||||
|
|
||||||
|
// gesamte fragen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
|
||||||
|
// Ergebnisse
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
|
||||||
|
$query = "SELECT * FROM fragen WHERE fragen_nummer = $nummer";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$frage = $ergebnisse->fetch();
|
||||||
|
|
||||||
|
//Auswahlen
|
||||||
|
$query = "SELECT * FROM auswahlmöglichkeiten WHERE fragen_nummer = $nummer";
|
||||||
|
|
||||||
|
//Ergebnise
|
||||||
|
$auswahlen = $dbh->query($query);
|
||||||
|
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Quiz-Fragen</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<div class="current"> Frage <?php echo $frage['fragen_nummer']; ?> von <?php echo $total; ?></div>
|
||||||
|
<p class="question">
|
||||||
|
<?php echo $frage['text'];?>
|
||||||
|
</p>
|
||||||
|
<form method="post" action="prozess.php">
|
||||||
|
<ul class="auswahlen">
|
||||||
|
<?php while($row = $auswahlen->fetch()): ?>
|
||||||
|
<li><input id="fragen" name="auswahl" type="radio" value="<?php echo $row['id'];?>" /><?php echo"<label for='fragen' style='width :auto'>". $row['text']."</label>";?></li>
|
||||||
|
<?php endwhile;?>
|
||||||
|
</ul>
|
||||||
|
<input class="submit" type="submit" value="Nächste"/>
|
||||||
|
<input type="hidden" name="nummer" value="<?php echo $nummer; ?>" />
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<?php session_start(); ?>
|
||||||
|
|
||||||
|
<?php include 'datenbanken.php';?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
//Gesamtfragen bekommen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Quiz-Fragen</title>
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
font-family: arial;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
input[type='text']{
|
||||||
|
width: 50%;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
}
|
||||||
|
input[type='number']{
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 3px #f4f4f4 solid;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
border-top: 3px #f4f4f4 solid ;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
a.start{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.current{
|
||||||
|
padding: 10px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
border: #ccc dotted 1px;
|
||||||
|
margin: 20px 0 10px 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width:960px){
|
||||||
|
.container{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.submit{
|
||||||
|
width: 50px;
|
||||||
|
background-color: aqua;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>CSS Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Testen Sie Ihr CSS-Wissen</h2>
|
||||||
|
<p>Dies ist ein Multiple-Choice-Quiz, um Ihre HTML-Kenntnisse zu testen</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Anzahl der Fragen: </strong><?php echo $total; ?></li>
|
||||||
|
<li><strong>Typ: </strong>Mehrfachauswahl</li>
|
||||||
|
<li><strong>Geschätzte Zeit: </strong>8 Minuten</li>
|
||||||
|
</ul>
|
||||||
|
<a href="fragen.php?n=1" class="start">Quiz starten</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
URHEBERRECHTE © 2023, OV-CODESCHULE
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<?php include 'datenbanken.php'; ?>
|
||||||
|
<?php session_start();?>
|
||||||
|
<?php
|
||||||
|
if (!isset($_SESSION['css_punktzahl'])){
|
||||||
|
$_SESSION['css_punktzahl'] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_POST){
|
||||||
|
$nummer = $_POST['nummer'];
|
||||||
|
$ausgewählte_wahl = $_POST['auswahl'];
|
||||||
|
$nächste = $nummer+1;
|
||||||
|
|
||||||
|
// Gesamte fragen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
|
||||||
|
// Ergebnisse
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
|
||||||
|
// Richtige Auswahl
|
||||||
|
$query= "SELECT * FROM auswahlmöglichkeiten WHERE fragen_nummer = $nummer AND ist_richtig = 1";
|
||||||
|
|
||||||
|
// Ergebnisse
|
||||||
|
$ergebnis = $dbh->query($query);
|
||||||
|
|
||||||
|
// Zeilen
|
||||||
|
$row = $ergebnis->fetch();
|
||||||
|
|
||||||
|
// Setze die richtige Auswahl
|
||||||
|
$richtige_auswahl = $row['id'];
|
||||||
|
|
||||||
|
// Vergleich
|
||||||
|
if($richtige_auswahl == $ausgewählte_wahl){
|
||||||
|
|
||||||
|
// Antwort richtig
|
||||||
|
$_SESSION['css_punktzahl'] +=1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Überprüfe, ob die Letzte Frage
|
||||||
|
if ($nummer == $total){
|
||||||
|
header("Location: schluss.php");
|
||||||
|
exit();
|
||||||
|
}else{
|
||||||
|
header("Location: fragen.php?n=".$nächste);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
-- phpMyAdmin SQL Dump
|
||||||
|
-- version 5.2.0
|
||||||
|
-- https://www.phpmyadmin.net/
|
||||||
|
--
|
||||||
|
-- Host: 127.0.0.1
|
||||||
|
-- Generation Time: Apr 14, 2023 at 04:57 PM
|
||||||
|
-- Server version: 10.4.25-MariaDB
|
||||||
|
-- PHP Version: 8.1.10
|
||||||
|
|
||||||
|
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
|
||||||
|
START TRANSACTION;
|
||||||
|
SET time_zone = "+00:00";
|
||||||
|
|
||||||
|
|
||||||
|
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
|
||||||
|
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
|
||||||
|
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
|
||||||
|
/*!40101 SET NAMES utf8mb4 */;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Database: `quiz_fragen_css`
|
||||||
|
--
|
||||||
|
|
||||||
|
-- --------------------------------------------------------
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Table structure for table `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
|
||||||
|
CREATE TABLE `auswahlmöglichkeiten` (
|
||||||
|
`fragen_nummer` int(100) NOT NULL,
|
||||||
|
`ist_richtig` tinyint(100) NOT NULL DEFAULT 0,
|
||||||
|
`text` text NOT NULL,
|
||||||
|
`id` int(100) NOT NULL
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Dumping data for table `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
|
||||||
|
INSERT INTO `auswahlmöglichkeiten` (`fragen_nummer`, `ist_richtig`, `text`, `id`) VALUES
|
||||||
|
(1, 0, 'Cascading Script Style', 1),
|
||||||
|
(1, 1, 'Cascading Style Sheets', 2),
|
||||||
|
(1, 0, 'Cascading Syntax Sheets', 3),
|
||||||
|
(1, 0, 'Cascading Sheet Styles', 4),
|
||||||
|
(2, 0, 'border-color', 5),
|
||||||
|
(2, 1, 'border-style', 6),
|
||||||
|
(2, 0, 'border-width', 7),
|
||||||
|
(2, 0, 'border-radius', 8),
|
||||||
|
(3, 0, 'Verwenden eines Hexadezimalwerts', 9),
|
||||||
|
(3, 0, 'Mit einem Schlüsselwort wie „red“', 10),
|
||||||
|
(3, 0, 'Verwenden eines RGB Werts', 11),
|
||||||
|
(3, 1, 'Alles das oben Genannte', 12),
|
||||||
|
(4, 0, 'padding', 13),
|
||||||
|
(4, 0, 'margin-top', 14),
|
||||||
|
(4, 1, 'margin', 15),
|
||||||
|
(4, 0, 'margin-right', 16),
|
||||||
|
(5, 1, 'block', 17),
|
||||||
|
(5, 0, 'grid', 18),
|
||||||
|
(5, 0, 'inline-block', 19),
|
||||||
|
(5, 0, 'flex', 20),
|
||||||
|
(6, 0, 'static', 21),
|
||||||
|
(6, 1, 'relative', 22),
|
||||||
|
(6, 0, 'absolute', 23),
|
||||||
|
(6, 0, 'fixed', 24),
|
||||||
|
(7, 0, 'font-style', 25),
|
||||||
|
(7, 0, 'font-family', 26),
|
||||||
|
(7, 1, 'font-size', 27),
|
||||||
|
(7, 0, 'font-weight', 28),
|
||||||
|
(8, 1, 'border-color', 29),
|
||||||
|
(8, 0, 'border-style', 30),
|
||||||
|
(8, 0, 'border-width', 31),
|
||||||
|
(8, 0, 'border-radius', 32),
|
||||||
|
(9, 0, 'margin-right', 33),
|
||||||
|
(9, 0, 'margin-top', 34),
|
||||||
|
(9, 1, 'margin-left', 35),
|
||||||
|
(9, 0, 'margin-bottom', 36),
|
||||||
|
(10, 0, 'color', 37),
|
||||||
|
(10, 0, 'border-color', 38),
|
||||||
|
(10, 1, 'background-color', 39),
|
||||||
|
(10, 0, 'color-scheme', 40),
|
||||||
|
(11, 1, 'fixed', 41),
|
||||||
|
(11, 0, 'absolute', 42),
|
||||||
|
(11, 0, 'static', 43),
|
||||||
|
(11, 0, 'sticky', 44),
|
||||||
|
(12, 0, 'block', 45),
|
||||||
|
(12, 0, 'inline', 46),
|
||||||
|
(12, 1, 'inline-block', 47),
|
||||||
|
(12, 0, 'grid', 48);
|
||||||
|
|
||||||
|
-- --------------------------------------------------------
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Table structure for table `fragen`
|
||||||
|
--
|
||||||
|
|
||||||
|
CREATE TABLE `fragen` (
|
||||||
|
`fragen_nummer` int(11) NOT NULL,
|
||||||
|
`text` text NOT NULL
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Dumping data for table `fragen`
|
||||||
|
--
|
||||||
|
|
||||||
|
INSERT INTO `fragen` (`fragen_nummer`, `text`) VALUES
|
||||||
|
(1, 'Wofür steht CSS?'),
|
||||||
|
(2, 'Welche CSS-Eigenschaft wird verwendet, um den Rahmen eines Elements anzuzeigen.'),
|
||||||
|
(3, 'Wie spezifizieren Sie eine Farbe in CSS?'),
|
||||||
|
(4, 'Welche CSS Eigenschaft wird verwendet, um den Margin auf allen Seiten anzugeben?'),
|
||||||
|
(5, 'Was ist der Standardwert der display Eigenschaft?'),
|
||||||
|
(6, 'Welcher Wert der CSS Positionseigenschaft platziert ein Element relativ zu seiner normalen Position?'),
|
||||||
|
(7, 'Welche CSS Eigenschaft wird verwendet, um die Schriftgröße anzugeben?'),
|
||||||
|
(8, 'Welche CSS Eigenschaft wird verwendet, um die Rahmenfarbe anzugeben?'),
|
||||||
|
(9, 'Welche CSS Eigenschaft wird verwendet, um den Margin auf der linken Seite eines Elements anzugeben?'),
|
||||||
|
(10, 'Welche CSS Eigenschaft wird verwendet, um die Hintergrundfarbe eines Elements anzugeben?'),
|
||||||
|
(11, 'Welche CSS Positionseigenschaft wird verwendet, um ein Element an Ort und Stelle zu fixieren?'),
|
||||||
|
(12, 'Welcher Wert der CSS Positionseigenschaft bewirkt, dass sich ein Element wie ein Inline-Element verhält, ermöglicht es Ihnen aber trotzdem, eine Breite und Höhe festzulegen?');
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indexes for dumped tables
|
||||||
|
--
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indexes for table `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
ALTER TABLE `auswahlmöglichkeiten`
|
||||||
|
ADD PRIMARY KEY (`id`);
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indexes for table `fragen`
|
||||||
|
--
|
||||||
|
ALTER TABLE `fragen`
|
||||||
|
ADD PRIMARY KEY (`fragen_nummer`);
|
||||||
|
|
||||||
|
--
|
||||||
|
-- AUTO_INCREMENT for dumped tables
|
||||||
|
--
|
||||||
|
|
||||||
|
--
|
||||||
|
-- AUTO_INCREMENT for table `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
ALTER TABLE `auswahlmöglichkeiten`
|
||||||
|
MODIFY `id` int(100) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=49;
|
||||||
|
COMMIT;
|
||||||
|
|
||||||
|
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||||
|
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
|
||||||
|
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<?php include 'datenbanken.php'; ?>
|
||||||
|
<?php session_start();?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Endstand</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<h1>CSS Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if ($_SESSION["css_punktzahl"] >= 10){
|
||||||
|
echo " <h2>Perfekt!</h2>
|
||||||
|
<p>Sie haben den Test geschaft.</p>";
|
||||||
|
echo"<p>Endstand: ".$_SESSION['css_punktzahl']."/12 Punkte"."</p>
|
||||||
|
<a href='../Die CSS Zertifikat.php' class='zertifikat'>Zertifikat</a>";
|
||||||
|
}else{
|
||||||
|
echo "
|
||||||
|
<h2>Erfolgloser Test</h2>
|
||||||
|
<p>Sie haben den CSS Test leider nicht geschafft.</p>
|
||||||
|
<p>Endstand: ".$_SESSION['css_punktzahl']."</p>
|
||||||
|
<a href='fragen.php?n=1' class='start'>Nochmal Testen</a>
|
||||||
|
";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Punkte zurücksetzen
|
||||||
|
$_SESSION['css_punktzahl'] = 0;
|
||||||
|
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
body{
|
||||||
|
font-family: arial;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
input[type='text']{
|
||||||
|
width: 50%;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
}
|
||||||
|
input[type='number']{
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 3px #f4f4f4 solid;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
border-top: 3px #f4f4f4 solid ;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
a.start{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.current{
|
||||||
|
padding: 10px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
border: #ccc dotted 1px;
|
||||||
|
margin: 20px 0 10px 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width:960px){
|
||||||
|
.container{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.submit{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.container .zertifikat{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<?php
|
||||||
|
$server="mysql:host=localhost;dbname=quiz_fragen";
|
||||||
|
$user="root";
|
||||||
|
$pw="";
|
||||||
|
|
||||||
|
$dbh= new PDO($server,$user,$pw);
|
||||||
|
if(!$dbh){
|
||||||
|
echo "Verbindung Fehlgeschlagen";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<?php include 'datenbanken.php';?>
|
||||||
|
<?php session_start();?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
//Frage Nummer 1
|
||||||
|
$nummer = (int) $_GET['n'];
|
||||||
|
|
||||||
|
//gesamte fragen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
|
||||||
|
|
||||||
|
//Ergebnisse
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
|
||||||
|
$query = "SELECT * FROM fragen
|
||||||
|
WHERE fragen_nummer = $nummer";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$frage = $ergebnisse->fetch(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
//Auswahlen
|
||||||
|
|
||||||
|
$query = "SELECT * FROM auswahlmöglichkeiten
|
||||||
|
WHERE fragen_nummer = $nummer";
|
||||||
|
|
||||||
|
//Ergebnise
|
||||||
|
$auswahlen = $dbh->query($query);
|
||||||
|
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Quiz-Fragen</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<div class="current"> Frage <?php echo $frage['fragen_nummer']; ?> von <?php echo $total; ?></div>
|
||||||
|
<p class="question">
|
||||||
|
<?php echo $frage['text'];?>
|
||||||
|
</p>
|
||||||
|
<form method="post" action="prozess.php">
|
||||||
|
<ul class="auswahlen">
|
||||||
|
<?php while($row = $auswahlen->fetch(PDO::FETCH_ASSOC)): ?>
|
||||||
|
<li><input id="fragen" name="auswahl" type="radio" value="<?php echo $row['id'];?>" /><?php echo"<label for='fragen' style='width :auto'>". $row['text']."</label>";?></li>
|
||||||
|
<?php endwhile;?>
|
||||||
|
</ul>
|
||||||
|
<input class="submit" type="submit" value="Nächste"/>
|
||||||
|
<input type="hidden" name="nummer" value="<?php echo $nummer; ?>" />
|
||||||
|
</form>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
<?php include 'datenbanken.php';?>
|
||||||
|
<?php
|
||||||
|
if (isset($_POST["submit"])){
|
||||||
|
//Variable deklarieren
|
||||||
|
$richtige_auswahl = $_POST["richtige_auswahl"];
|
||||||
|
$fragen_nummer = $_POST["fragen_nummer"];
|
||||||
|
$fragen_text = $_POST["fragen_text"];
|
||||||
|
//auswahl Array
|
||||||
|
$auswahlen = array();
|
||||||
|
$auswahlen[1] = $_POST["auswahl1"];
|
||||||
|
$auswahlen[2] = $_POST["auswahl2"];
|
||||||
|
$auswahlen[3] = $_POST["auswahl3"];
|
||||||
|
$auswahlen[4] = $_POST["auswahl4"];
|
||||||
|
$auswahlen[5] = $_POST["auswahl5"];
|
||||||
|
|
||||||
|
//fragen query
|
||||||
|
$query = "INSERT INTO fragen (fragen_nummer,text)
|
||||||
|
VALUES('$fragen_nummer','$fragen_text')";
|
||||||
|
|
||||||
|
//query Ausführen
|
||||||
|
$row_eingeben = $mysqli->query($query);
|
||||||
|
|
||||||
|
//Einführung
|
||||||
|
if($row_eingeben){
|
||||||
|
foreach($auswahlen as $auswahl => $value){
|
||||||
|
if($value != ''){
|
||||||
|
if($richtige_auswahl == $auswahl){
|
||||||
|
$ist_richtig = 1;
|
||||||
|
}else{
|
||||||
|
$ist_richtig = 0;
|
||||||
|
}
|
||||||
|
$query = "INSERT INTO auswahlmöglichkeiten (fragen_nummer, ist_richtig, text)
|
||||||
|
VALUES ('$fragen_nummer', '$ist_richtig', '$value' )";
|
||||||
|
|
||||||
|
//query Ausführen
|
||||||
|
$row_eingeben = $mysqli->query($query);
|
||||||
|
|
||||||
|
//Einführung
|
||||||
|
if($row_eingeben){
|
||||||
|
continue;
|
||||||
|
}else{
|
||||||
|
die("Fehler:");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$nachricht = "Frage wurde hinzugefügt";
|
||||||
|
}
|
||||||
|
|
||||||
|
//gesamte Fragen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
// die Ergebnisse
|
||||||
|
$fragen = $mysqli->query($query);
|
||||||
|
$total = $fragen->num_rows;
|
||||||
|
$nächste = $total +1;
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Fragen hinzufügen</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<h1>HTML Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Frage hinzufügen</h2>
|
||||||
|
<form method="post" action="hinzusetzen.php">
|
||||||
|
<p>
|
||||||
|
<label>Frage_n: </label>
|
||||||
|
<input type="number" name="fragen_nummer"/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Fragetext: </label>
|
||||||
|
<input type="text" name="fragen_text"/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Auswahl #1: </label>
|
||||||
|
<input type="text" name="auswahl1"/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Auswahl #2: </label>
|
||||||
|
<input type="text" name="auswahl2">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Auswahl #3: </label>
|
||||||
|
<input type="text" name="auswahl3">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Auswahl #4: </label>
|
||||||
|
<input type="text" name="auswahl4">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>Auswahl #5: </label>
|
||||||
|
<input type="text" name="auswahl5">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<label>richtig: </label>
|
||||||
|
<input type="number" name="richtige_auswahl">
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="submit" name="submit" value="submit" class="submit">
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
Copyright © 2023, HTML Quiz-Fragen
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<?php session_start(); ?>
|
||||||
|
|
||||||
|
<?php include 'datenbanken.php';?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
//Gesamtfragen bekommen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Quiz-Fragen</title>
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
font-family: arial;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
label{
|
||||||
|
display: inline-block;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
input[type='text']{
|
||||||
|
width: 50%;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
}
|
||||||
|
input[type='number']{
|
||||||
|
width: 50px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px #ccc solid;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
width: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
padding: 80px;
|
||||||
|
text-align: center;
|
||||||
|
background: #1abc9c;
|
||||||
|
color: white;
|
||||||
|
border-bottom: 3px #f4f4f4 solid;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
border-top: 3px #f4f4f4 solid ;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
main{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
a.start{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
.current{
|
||||||
|
padding: 10px;
|
||||||
|
background: #f4f4f4;
|
||||||
|
border: #ccc dotted 1px;
|
||||||
|
margin: 20px 0 10px 0;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width:960px){
|
||||||
|
.container{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.submit{
|
||||||
|
width: 50px;
|
||||||
|
background-color: aqua;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
<h2>Testen Sie Ihr HTML-Wissen</h2>
|
||||||
|
<p>Dies ist ein Multiple-Choice-Quiz, um Ihre HTML-Kenntnisse zu testen</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Anzahl der Fragen:</strong><?php echo $total; ?></li>
|
||||||
|
<li><strong>Typ:</strong>Mehrfachauswahl</li>
|
||||||
|
<li><strong>Geschätzte Zeit:</strong><?php echo $total * .5; ?>Minuten</li>
|
||||||
|
</ul>
|
||||||
|
<a href="fragen.php?n=1" class="start">Quiz starten</a>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
URHEBERRECHTE © 2023, OV-CODESCHULE
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<?php include 'datenbanken.php'; ?>
|
||||||
|
<?php session_start();?>
|
||||||
|
<?php
|
||||||
|
if (!isset($_SESSION['punktzahl'])){
|
||||||
|
$_SESSION['punktzahl'] = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($_POST){
|
||||||
|
$nummer = $_POST['nummer'];
|
||||||
|
$ausgewählte_wahl = $_POST['auswahl'];
|
||||||
|
$nächste = $nummer+1;
|
||||||
|
|
||||||
|
//gesamte fragen
|
||||||
|
$query = "SELECT * FROM fragen";
|
||||||
|
//Ergebnisse
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
$total = $ergebnisse->rowCount();
|
||||||
|
|
||||||
|
//richtige Auswahl
|
||||||
|
$query= "SELECT * FROM auswahlmöglichkeiten
|
||||||
|
WHERE fragen_nummer = $nummer AND ist_richtig = 1";
|
||||||
|
|
||||||
|
//Ergebnisse
|
||||||
|
$ergebnis = $dbh->query($query);
|
||||||
|
|
||||||
|
// Zeilen
|
||||||
|
$row = $ergebnis->fetch(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
//setze die richtige Auswahl
|
||||||
|
$richtige_auswahl = $row['id'];
|
||||||
|
|
||||||
|
//vergleich
|
||||||
|
if($richtige_auswahl == $ausgewählte_wahl){
|
||||||
|
//Antwort richtig
|
||||||
|
$_SESSION['punktzahl'] +=1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Überprüfe, ob die Letzte Frage
|
||||||
|
if ($nummer == $total){
|
||||||
|
header("Location: schluss.php");
|
||||||
|
exit();
|
||||||
|
}else{
|
||||||
|
header("Location: fragen.php?n=".$nächste);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,150 @@
|
||||||
|
-- phpMyAdmin SQL Dump
|
||||||
|
-- version 5.2.0
|
||||||
|
-- https://www.phpmyadmin.net/
|
||||||
|
--
|
||||||
|
-- Host: localhost
|
||||||
|
-- Erstellungszeit: 22. Feb 2023 um 15:17
|
||||||
|
-- Server-Version: 10.4.24-MariaDB
|
||||||
|
-- PHP-Version: 8.1.6
|
||||||
|
|
||||||
|
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
|
||||||
|
START TRANSACTION;
|
||||||
|
SET time_zone = "+00:00";
|
||||||
|
|
||||||
|
|
||||||
|
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
|
||||||
|
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
|
||||||
|
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
|
||||||
|
/*!40101 SET NAMES utf8mb4 */;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Datenbank: `quiz_fragen`
|
||||||
|
--
|
||||||
|
|
||||||
|
-- --------------------------------------------------------
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Tabellenstruktur für Tabelle `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
|
||||||
|
CREATE TABLE `auswahlmöglichkeiten` (
|
||||||
|
`fragen_nummer` int(100) NOT NULL,
|
||||||
|
`ist_richtig` tinyint(100) NOT NULL DEFAULT 0,
|
||||||
|
`text` text NOT NULL,
|
||||||
|
`id` int(100) NOT NULL
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Daten für Tabelle `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
|
||||||
|
INSERT INTO `auswahlmöglichkeiten` (`fragen_nummer`, `ist_richtig`, `text`, `id`) VALUES
|
||||||
|
(1, 1, 'Hyper Text Markup Languge\r\n', 1),
|
||||||
|
(1, 0, ' Home Tool Markup Language\r\n', 2),
|
||||||
|
(1, 0, ' Hyperlinks and Text Markup Language\r\n', 3),
|
||||||
|
(1, 0, ' Hyperlinks and Text Markup Land\r\n', 4),
|
||||||
|
(2, 1, '< href=\"url\" target=\"_blank\">', 5),
|
||||||
|
(2, 0, ' \n< href=\"url\" target=\"new\">', 6),
|
||||||
|
(2, 0, ' < href=\"url\" new>', 7),
|
||||||
|
(2, 0, ' < url=\"neu_tab\">', 8),
|
||||||
|
(3, 0, 'Mozilla', 9),
|
||||||
|
(3, 1, ' The World Wide Web Consortium', 10),
|
||||||
|
(3, 0, 'Google', 11),
|
||||||
|
(3, 0, 'Microsoft', 12),
|
||||||
|
(4, 0, '<h6>', 13),
|
||||||
|
(4, 0, '<heading>', 14),
|
||||||
|
(4, 1, '<h1>', 15),
|
||||||
|
(4, 0, '<head>', 16),
|
||||||
|
(5, 1, '<br>', 17),
|
||||||
|
(5, 0, '<break>', 18),
|
||||||
|
(5, 0, '<ib>', 19),
|
||||||
|
(5, 0, '<breakLine>', 20),
|
||||||
|
(6, 1, '/', 21),
|
||||||
|
(6, 0, '<', 22),
|
||||||
|
(6, 0, '*', 23),
|
||||||
|
(6, 0, ')', 24),
|
||||||
|
(7, 0, '<dl>', 30),
|
||||||
|
(7, 0, '<ul>', 31),
|
||||||
|
(7, 0, '<list>', 32),
|
||||||
|
(7, 1, '<ol>', 33),
|
||||||
|
(8, 0, '<head>', 37),
|
||||||
|
(8, 1, '<title>', 38),
|
||||||
|
(8, 0, '<meta>', 39),
|
||||||
|
(8, 0, '<heading>', 40),
|
||||||
|
(9, 0, 'HTML wird benutzt, um Anwendungen zu programmieren.', 41),
|
||||||
|
(9, 1, 'HTML wird benutzt, um Webseiten zu erstellen.', 42),
|
||||||
|
(9, 0, 'HTML wird benutzt, damit man die Webseiten formatieren kann.', 43),
|
||||||
|
(9, 0, 'HTML wird benutzt, damit man Verbindung mit den Datenbanken zu erstellen.', 44),
|
||||||
|
(10, 0, 'Befehle, die der Interaktivität dienen\r\n', 45),
|
||||||
|
(10, 0, 'Befehle, die sich selbst aktualisieren (z.B. Counter)\r\n', 46),
|
||||||
|
(10, 1, 'Angaben zu Autor, Erstellungsdatum, Stichwörtern,...\r\n', 47),
|
||||||
|
(10, 0, 'Befehle, um die HTML Datei im Browser zu zeigen.', 48),
|
||||||
|
(11, 0, 'Lables', 49),
|
||||||
|
(11, 0, 'Attribute', 50),
|
||||||
|
(11, 1, 'Tags', 51),
|
||||||
|
(11, 0, 'codes', 52),
|
||||||
|
(12, 1, '<a>', 63),
|
||||||
|
(12, 0, '<Link>', 64),
|
||||||
|
(12, 0, '<p>', 65),
|
||||||
|
(12, 0, '<hyL>', 66),
|
||||||
|
(12, 0, '<il>', 67);
|
||||||
|
|
||||||
|
-- --------------------------------------------------------
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Tabellenstruktur für Tabelle `fragen`
|
||||||
|
--
|
||||||
|
|
||||||
|
CREATE TABLE `fragen` (
|
||||||
|
`fragen_nummer` int(11) NOT NULL,
|
||||||
|
`text` text NOT NULL
|
||||||
|
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Daten für Tabelle `fragen`
|
||||||
|
--
|
||||||
|
|
||||||
|
INSERT INTO `fragen` (`fragen_nummer`, `text`) VALUES
|
||||||
|
(1, 'wofür steht HTML?\n\n'),
|
||||||
|
(2, 'Wie können Sie einen Link in einem neuen Tab/Browserfenster öffnen?\r\n'),
|
||||||
|
(3, 'Wer macht die Webstandards?\r\n'),
|
||||||
|
(4, 'Wählen Sie das richtige HTML-Element für die größte Überschrift (heading):'),
|
||||||
|
(5, 'Was ist das richtige HTML-Element zum Einfügen eines Zeilenumbruchs?'),
|
||||||
|
(6, 'Welches Zeichen wird verwendet, um ein End-Tag anzuzeigen?'),
|
||||||
|
(7, 'Wie kann man eine nummerierte Liste erstellen?'),
|
||||||
|
(8, 'Welches HTML-Element definiert den Titel eines Dokuments?'),
|
||||||
|
(9, 'Was kann man mit HTML machen?'),
|
||||||
|
(10, 'Was sind die sogenannten Meta-Befehle?\r\n\r\n'),
|
||||||
|
(11, 'Wie nennt man die HTML-Befehle?\r\n'),
|
||||||
|
(12, 'Welches Tag wird verwendet, um einen Hyperlink zu erstellen?');
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indizes der exportierten Tabellen
|
||||||
|
--
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indizes für die Tabelle `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
ALTER TABLE `auswahlmöglichkeiten`
|
||||||
|
ADD PRIMARY KEY (`id`);
|
||||||
|
|
||||||
|
--
|
||||||
|
-- Indizes für die Tabelle `fragen`
|
||||||
|
--
|
||||||
|
ALTER TABLE `fragen`
|
||||||
|
ADD PRIMARY KEY (`fragen_nummer`);
|
||||||
|
|
||||||
|
--
|
||||||
|
-- AUTO_INCREMENT für exportierte Tabellen
|
||||||
|
--
|
||||||
|
|
||||||
|
--
|
||||||
|
-- AUTO_INCREMENT für Tabelle `auswahlmöglichkeiten`
|
||||||
|
--
|
||||||
|
ALTER TABLE `auswahlmöglichkeiten`
|
||||||
|
MODIFY `id` int(100) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=68;
|
||||||
|
COMMIT;
|
||||||
|
|
||||||
|
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||||
|
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
|
||||||
|
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<?php include 'datenbanken.php'; ?>
|
||||||
|
<?php session_start();?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für den Test.css">
|
||||||
|
<title>Endstand</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="container">
|
||||||
|
<h1>HTML Quiz-Fragen</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
if ($_SESSION["punktzahl"] >= 10){
|
||||||
|
echo " <h2>Perfekt!</h2>
|
||||||
|
<p>Sie haben den Test geschaft.</p>";
|
||||||
|
echo"<p>Endstand: ".$_SESSION['punktzahl']."</p>
|
||||||
|
<a href='../Die Zertifikat.php' class='zertifikat'>Zertifikat</a>";
|
||||||
|
}else{
|
||||||
|
echo "
|
||||||
|
<h2>Erfolgloser Test</h2>
|
||||||
|
<p>Sie haben den HTML Test leider nicht geschafft.</p>
|
||||||
|
<p>Endstand: ".$_SESSION['punktzahl']."</p>
|
||||||
|
<a href='fragen.php?n=1' class='start'>Nochmal Testen</a>
|
||||||
|
";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Punkte zurücksetzen
|
||||||
|
$_SESSION['punktzahl'] = 0;
|
||||||
|
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -0,0 +1,82 @@
|
||||||
|
<?php include_once ("for die Registieren.php")?>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$query = "SELECT * FROM registration";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row)
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>CSS Zertifikat</title>
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
font-family: Times New Roman;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
border: 1px solid;
|
||||||
|
height: 1000px;
|
||||||
|
width: 1000px;
|
||||||
|
margin: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
margin-top: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
color: black;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.container h2{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.container img{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.container span{
|
||||||
|
float: left;
|
||||||
|
margin-left: 300px;
|
||||||
|
margin-top: 160px;
|
||||||
|
}
|
||||||
|
.container span strong{
|
||||||
|
color: black;
|
||||||
|
font-weight: 800px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Abschlusszertifikat</h1><br>
|
||||||
|
<p>das bescheinigt das</p><br><br>
|
||||||
|
<h2><?php echo $row['firstName']." ". $row['lastName'];?></h2><br><br>
|
||||||
|
<p>hat die erforderlichen Studiengänge absolviert und die OV-Code CSS-Prüfungen bestanden und wird hiermit zum</p><br><br>
|
||||||
|
<h2>Zertifizierter CSS-Entwickler</h2><br><br>
|
||||||
|
<p>mit grundlegenden Kenntnissen in der Webentwicklung mit CSS erklärt.</p><br><br>
|
||||||
|
<img src="O_V3schools-removebg-preview.png" alt ="unsere LOGO: OV-Code">
|
||||||
|
<span><strong>Aufgegeben am <?php echo date("d.m.Y") ?><br><br> vom: </strong> OVCode</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
|
|
@ -0,0 +1 @@
|
||||||
|
<mxfile host="app.diagrams.net" modified="2023-02-24T22:17:10.944Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36" etag="cvaNy5XZw3zWsCFbzyh9" version="20.8.23" type="device"><diagram name="Seite-1" id="-oFXDpAI1cBCqiCTR_pP">7V1bc+I6Ev41VO15YMp38GNCksnuJnumKluZM+dlSmAB3hibkcUA+fUr2fJVBpuLL4DmYWLLtrC6v68ldbfknjpabL4isJy/ehZ0eopkbXrqQ09RFFOSyR9asg1LZFk2wpIZsi1WlhS82Z+QFUqsdGVb0M/ciD3PwfYyWzjxXBdOcKYMIOSts7dNPSf7q0swg1zB2wQ4fOl328LzsHSoDJLyZ2jP5tEvy4YZXhmDyccMeSuX/V5PUafBv/DyAkR1sYb6c2B569SPqo89dYQ8D4dHi80IOlS4kdjC5552XI3fG0EXV3ng2+PA/PGq4n+hTX9gDIZ/mqOnPqvlN3BWTB5vGCDM3hhvIymhubcYr4io79dzG8O3JZjQK2sCClI2xwuHnMnk0MfI+4glSUuAY89ccjwh7wkRKZh6LmY4kDVyzjckeiuIMNzkJUagCL0FxGhLbmFXVYMJeZsF1zqlUVY0TykzKgMMQ7O44kSO5ICJ8gCxDmROgtAisGOnHsJzb+a5wHlMSu8DLEFarUTOkntePG/JZPk/iPGWyQ6ssJeVPZEf2v5Fn/+iR6c/WHXBycMmc7ZlZ7zO8iqi5yPP8VDQFlUi/1R1n+p8b4UmcI+EVEZ1gGYQ77lPD++j0tsLBAQdgO3fWVKfXa8qR5d3D7lgAS+dMMSQV2KMWRtjFMGY/YzRKzJm2CnG6Bxj/gMm82ugjKa23cmogjL7KTOsSBlZ7hRnhhxnvsLxCmEfg9mls0Yfts0aTbBmP2siNpTTRusUbQZ6K5rd2DilWHL2I3UlUSs92aZ1fHVoUDuFBpmf2j72X4HtXLoFHTQ47ni3rAdX+vnz5WE9+vv15eevT0/ttzLsKMTWkYhWT8Qle/SbZ5OfjvWkSFk9mVJOASGD2FM5HcSvcQLg+clpTzEczFAZuNAiw2D8WlG3033gs6JGIl1kzIJngOP41M0FEbQxPSImzMc2pN4hAywoN9yxvwwfccJHn8JfCmvgYFJCL+AvQwff1N5QqLTFN0nN6HFotD1iMcSIpYTRWtU+yuxWH6UdRVlFtzRF301Z157M8e0QVovE2BnCDgVhSwhrViRsFDzpCGEHpphitImGbvlpovdOme9/Q9dde5cfQDPbdtNEFTfLtDbQH5m4UvSrSqfQH733gYMXeQoldbp78DJDvZHauzfo/+YTwbsike5U+huSQQ10mxu51DJQGWRIJstSyyxTeCfJOeaMHw603atSXX5S2AHV8VEC3mK61h1NkSFnrufCrCCzxvJgy8d4vEe6pXYqJTq9QHRR2al+GS0XgchpJDTQnFumtB5Z1pp18Cj8cGOfxicO8H17IpQemN4zKb1hlatFfWzXVF7udek0NI62B/lcmJqxMGwlp6yV3DClIrDUbgUgo/c+cDTFJMaNpv4LHUie60d1jFF0xV0tFnR4VW1AdcLU82TbcEIKZ5w429oUtMDWCjdeEf/KidqxNE7e7/4CXKtB5pQL/wTmqFrbzBncBnOOccyewLbKGaDdYttQhEPOplmjU5pV+ezeqgMe0+QHPA8AUzeRtIbISvxFybDnc0UuBjeNgftR3aOUxVKnTXnex6ANeFMuKwW23KjLlqtFfqZQ7pb9OyPolD5zmo2e8JfALXwkWUzVZ5C5oy/m2tgGTmGVjwuayxXcdg99TN3Fdxq2Zyt3tifcHb5A9qVIcdCSsPQNzqnjcgbJXxz4MJ8hon9iPEZ3JonscT3jyg1OtRLNxv+gIxKiHyn5+0dQi0TB1p+Che1sw7vvEJVIcNMzdH5DbE9AeOoD1+/7ENnT1KN+AFz6oL8ATihKqVja9D0UXQ8rSx/8sUOnoxLBUuZeadNvpIFXDN+1TZU3hhbrSqSVS0MXfkj/aRCEGtHDf84RpC/uLqBjBdZFAqtp+AAMLn2HYx+STuWL4MOVN/CK+fBq0/HaFEFSjcMCdtLXMBg7YsFYVyD82htIh7+BjbvGRr7bH9hDPW5i8ecY2PQ9nTH8SCOcyaJ0WiHXOa2I0n8cOKWvQScTRH7OHSte2JYVzJjnHrI/SR0gmzJ/0nxEjtbURPMRoyAvKIjy5+cjsff2/BMSPgz6Go7+XZcaLt7Z4Dj20ocdn/rF4aR46sdL2mhy4qfx6wkebNIe/0IFrOXdpG0L2GjFS9qGf0s7u9uqOCSr5ZbgNB2ijdqZosx3aI8v2Cqpg46RRi9aMpEXbY1pT+XC7UiaQ54Lcr5DrprnkK+oYU7pRT5moXBeT6pyLoXnRyL5iurWOG9F92m8jqSnJMJ3ZBRpJ1jKQ+VVl6hdGqpyPQkXfa4bVe1nT7aIqsojsEvrnPRsRYNmQWUU5c/fDqiq7vjQEKjK+q2qoNK1dkFVtJBfjHjK+yZu1lFV4VxFDW/dYIhJTcMa5zwF+Yrq1vhtj3E7BapSLBw7GIm3oW0KVIcNcW/XjORHCsdrPF9Rwx1HNDIRGm+M42XQqVvjg45oPOk1Mn1G0oWcvdfoGKTK14MevJIs3r28YR+r2foOU5mBR1/6IklaCY6Cs28Q2aTxdFeM9jaZrZq8rXZrZ+bh7uTtnWlOu/NG9m75YBYvcAu3CwgSOVgEf84i+DvyunfkHuWge+gGAg4YQ+c+zi+J0MFM51GQMs0zhd/y2w7oBfngjS7tMdte2qN0fjVHtEij1CBEVr4rBqFoTnr88tUUu5MgeD1bgHSYwdyeL+0zuGjOcDMLOsjREwKrXTWKxR1iccetNPCK4SsWdwg+CD6IxR0C4WJxh1jcsWtqkgtXdWFxhylCWNW8z3p+NYOpHul95mtq+sMVkohiHRfFOqfS8zXVrvTDUuduV+mxJ+hkpfM1Nc50RSi9YaWX24zalX5YPuNl5Tp1BC+qaX7RhzVBRpEaTmSSpVa2DGvl2xfSoCKQzp0B0/Synril6S/yEYVxmvbnYEkPiTjJDBE63gyBBRHyMhXsz1xLZQGUzdSCiFGk0V4tkaO69gJLWNjaXmCyxE/PnkndSzAr+JzzIbuuXZIeYpk3oYdf7+8v0+dPfzv9tVndj7z+X8rXflG6uIjgiQieiODdVgOvGL4igif4IPggIngC4SKCJyJ43YzgFX4dXm5nLUG0E38v2Yc/2ZW/5BOpcYbxIStYDv0UfaGw2EQunSlceJ9xokvoJI3ys8038sKYJ1zVr2XsgHmBCHciP55vM+Q3+c3nQiG14rA8IxJPRVix07Gf853UGHDa3aqsx7H/Sp0UrWC3K1iN/IgXC1azHrDK+Y8gN4zWOj4nfQZb2++csZXVCwewrNSD4Pz+GE0jWFZ4g1vwXa0mIzznIICS27ts2ORXWYoFzQ/KdgZiDl1NdQ6J5aONNZoMcoo8Oo9MgEzaOH/1LEjv+D8=</diagram></mxfile>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
|
|
@ -0,0 +1,82 @@
|
||||||
|
<?php include_once ("for die Registieren.php")?>
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$query = "SELECT * FROM registration";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row)
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>HTML Zertifikat</title>
|
||||||
|
<style>
|
||||||
|
body{
|
||||||
|
font-family: Times New Roman;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
border: 1px solid;
|
||||||
|
height: 1000px;
|
||||||
|
width: 1000px;
|
||||||
|
margin: auto;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||||
|
margin-top: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 100px;
|
||||||
|
color: black;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container p{
|
||||||
|
text-align: center;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
.container h2{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.container img{
|
||||||
|
width: 400px;
|
||||||
|
float: left;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.container span{
|
||||||
|
float: left;
|
||||||
|
margin-left: 300px;
|
||||||
|
margin-top: 160px;
|
||||||
|
}
|
||||||
|
.container span strong{
|
||||||
|
color: black;
|
||||||
|
font-weight: 800px;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<h1>Abschlusszertifikat</h1><br>
|
||||||
|
<p>das bescheinigt das</p><br><br>
|
||||||
|
<h2><?php echo $row['firstName']." ". $row['lastName'];?></h2><br><br>
|
||||||
|
<p>hat die erforderlichen Studiengänge absolviert und die OV-Code HTML-Prüfungen bestanden und wird hiermit zum</p><br><br>
|
||||||
|
<h2>Zertifizierter HTML-Entwickler</h2><br><br>
|
||||||
|
<p>mit grundlegenden Kenntnissen in der Webentwicklung mit HTML5 erklärt.</p><br><br>
|
||||||
|
<img src="O_V3schools-removebg-preview.png" alt ="unsere LOGO: OV-Code">
|
||||||
|
<span><strong>Aufgegeben am <?php echo date("d.m.Y") ?><br><br> vom: </strong> OVCode</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Basis Tags</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Basis Tags</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--Die Inhalt des Körpers der Seiten-->
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="körper">
|
||||||
|
<h2>Die Überschriften-Tags?</h2>
|
||||||
|
<p>Jedes Dokument beginnt mit einer Überschrift. Sie können verschiedene Größen für
|
||||||
|
Ihre Überschriften verwenden. HTML hat auch sechs Ebenen von Überschriften,
|
||||||
|
die die Elemente <b><h1></b>, <b><h2></b>, <b><h3></b>, <b><h4></b>, <b><h5></b> und<b> <h6></b> verwenden. Während der Anzeige
|
||||||
|
einer Überschrift fügt der Browser eine Zeile vor und eine Zeile nach dieser Überschrift
|
||||||
|
hinzu.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Überschriften Beispiele</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 1.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 2.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 3.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 4.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 5.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist Überschrift 6.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="Selbst versuch (1).html" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis- </p>
|
||||||
|
<img src="Die Bilder/Überschriften Ausgabe.png" alt="Überschriften Ausgabe.png" title="Überschriften Ausgabe">
|
||||||
|
<h2>Absatz-Tag</h2>
|
||||||
|
<p>Das <b><p></b>-Tag bietet eine Möglichkeit, Ihren Text in verschiedene Absätze
|
||||||
|
zu strukturieren. Jeder Textabsatz sollte zwischen einem öffnenden <b><p></b>-
|
||||||
|
und einem schließenden <b></p></b>-Tag stehen, wie unten im Beispiel gezeigt
|
||||||
|
−</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Absätze Beispiele</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hier ist ein erster Absatz des Textes.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hier ist ein zweiter Absatz des Textes.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hier ist ein dritter Absatz des Textes.</span>
|
||||||
|
<span><b></p></b></span><br><p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis-</p>
|
||||||
|
<img src="Die Bilder/Ausgabe absätze.png" alt="Ausgabe absätze.png" title="Ausgabe absätze">
|
||||||
|
<h2>Zeilenumbruch-Tag</h2>
|
||||||
|
<p>Wann immer Sie das Element <b><br></b> verwenden, beginnt alles,
|
||||||
|
was darauf folgt, in der nächsten Zeile. Dieses Tag ist ein Beispiel
|
||||||
|
für ein leeres Element, bei dem Sie keine öffnenden und schließenden Tags benötigen,
|
||||||
|
da zwischen ihnen nichts eingefügt werden kann.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Zeilenumbruch Beispiele</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo</span>
|
||||||
|
<span><b><br></b></span><br>
|
||||||
|
<span style="margin-left: 60px;">Sie haben Ihren Auftrag pünktlich geliefert.</span>
|
||||||
|
<span><b><br></b></span>
|
||||||
|
<p style="margin-left: 50px;">Danke <b><br></b></p>
|
||||||
|
<span style="margin-left:60px ;">Herr Müller.</span>
|
||||||
|
<span><b></p></b></span><br><p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis-</p>
|
||||||
|
<img src="Die Bilder/zeilenumbruch ausgabe.png" alt="zeilenumbruch ausgabe.png" title="zeilenumbruch ausgabe">
|
||||||
|
<h2>Inhalt zentrieren</h2>
|
||||||
|
<p>Sie können das Tag <b><center></b> verwenden, um beliebige Inhalte in die Mitte der Seite
|
||||||
|
oder einer beliebigen Tabellenzelle zu stellen.
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Beispiel zum Zentrieren von Inhalten</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Dieser Text steht nicht in der Mitte.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
|
||||||
|
<span style="margin-left: 60px;"><b><center></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><p></b></span>
|
||||||
|
<span>Dieser Text steht in der Mitte.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></center></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis-</p>
|
||||||
|
<img src="Die Bilder/Zentrieren Beispiel.png" alt="Zentrieren Beispiel.png" title="Zentrieren Beispiel"><br>
|
||||||
|
|
||||||
|
<p><a href="HTML-Meta Tags.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End der Inhalt-->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,243 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Einführung</title>
|
||||||
|
<style>
|
||||||
|
.navbar.profile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar .profile .profile2{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.navbar .profile:hover .profile2{
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
background-color:#01d28e !important;
|
||||||
|
width: 30%;
|
||||||
|
text-align: justify;
|
||||||
|
padding: 15px;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
border-radius:1%;
|
||||||
|
}
|
||||||
|
.navbar .profile .profile2 strong{
|
||||||
|
color:black;
|
||||||
|
font-weight:bolder;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Einführung</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Die Inhalt des Körper der Seiten -->
|
||||||
|
<div class="körper">
|
||||||
|
<h2>Was ist HTML?</h2>
|
||||||
|
<P><b>HTML</b> steht für <b> Hyper Text Markup Language auf
|
||||||
|
deutsch (Hypertext-Auszeichnungssprache) </b> die im Web am
|
||||||
|
häufigsten verwendete Sprache zur Entwicklung von Webseiten.
|
||||||
|
HTML wurde Ende 1991 von Berners-Lee entwickelt. "HTML 2.0" war
|
||||||
|
die erste Standard-HTML-Spezifikation, die 1995 veröffentlicht
|
||||||
|
wurde.
|
||||||
|
</P>
|
||||||
|
<h2>Warum HTML lernen?</h2>
|
||||||
|
<p>HTML wird häufig verwendet, um Webseiten mit Hilfe
|
||||||
|
verschiedener Tags zu formatieren, die in der HTML-Sprache
|
||||||
|
verfügbar sind.
|
||||||
|
HTML ist ein MUSS für Studenten und Berufstätige,
|
||||||
|
um ein großartiger Softwareentwickler zu werden,
|
||||||
|
insbesondere wenn sie im Bereich der Webentwicklung arbeiten.
|
||||||
|
Ich werde einige der wichtigsten Vorteile des Erlernens von
|
||||||
|
HTML auflisten:</p>
|
||||||
|
<ul class="forinfo">
|
||||||
|
<li><b>Website erstellen:</b> Sie können eine Website erstellen oder eine vorhandene Webvorlage anpassen, wenn Sie sich mit HTML auskennen.</li>
|
||||||
|
<li><b>Werden Sie Webdesigner: </b> Wenn Sie eine Karriere als professioneller Webdesigner starten wollen, ist HTML- und CSS-Design ein Muss..</li>
|
||||||
|
<li><b>Lernen Sie andere Sprachen:</b> Sobald Sie die Grundlagen von HTML verstanden haben, sind andere verwandte Technologien wie Javascript, PHP oder Angular leichter zu verstehen.</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Aufbau eines HTML-Element</h2>
|
||||||
|
<p>HTML-Elemente sind die Bausteine aus denen sich eine Webseite zusammensetzt und
|
||||||
|
auch damit strukturiert wird. Fast jedes HTML-Element besteht aus einem öffnenden und
|
||||||
|
einem schließenden Tag. Die folgende Abbildung wirkt auf den ersten Blick vielleicht
|
||||||
|
etwas verwirrend, nimm Dir Zeit und Du wirst sehen, dass HTML-Elemente gar nicht so
|
||||||
|
schwierig aufgebaut sind.</p>
|
||||||
|
<img src="Die Bilder/Aufbau eines HTML-Element2.jpg" alt="Aufbau eines HTML-Element" title="Aufbau eines HTML-Element">
|
||||||
|
<h3>Hallo Welt mit HTML:</h3>
|
||||||
|
<p>Um Ihnen ein wenig Aufregung über HTML zu geben, werde ich Ihnen ein kleines konventionelles HTML Hello World Programm geben.</p>
|
||||||
|
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Dies ist der Titel des Dokuments</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist heading.</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo Welt.</span>
|
||||||
|
<span><b></p></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<h2>Die Ausgabe im Browserfentser</h2>
|
||||||
|
<img class="ausgabe" src="Die Bilder/Die Ausgabe.png" alt="Die Ausgabe.png">
|
||||||
|
<h2>HTML - Tags</h2>
|
||||||
|
<p>HTML ist eine Auszeichnungssprache und verwendet verschiedene Tags, um den Inhalt zu
|
||||||
|
formatieren. Diese Tags werden in spitze Klammern <b><Tag Name></b> eingeschlossen.
|
||||||
|
Mit Ausnahme weniger Tags haben die meisten Tags ihre entsprechenden schließenden
|
||||||
|
Tags. Zum Beispiel hat <b><html></b> sein schließendes Tag <b></html></b> und das
|
||||||
|
<b><body></b>-Tag hat sein schließendes <b></body></b>-Tag usw.</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Sr.No</th>
|
||||||
|
<th style="text-align: center;">Tags & Beschreibungen</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">1</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><!DOCTYPE></code></b>
|
||||||
|
<p>Dieses Tag definiert den Dokumenttyp und die HTML-Version.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">2</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><html></code></b>
|
||||||
|
<p>Dieses Tag umschließt das komplette HTML-Dokument und besteht hauptsächlich aus dem Dokument-Header.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">3</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><title></code></b>
|
||||||
|
<p>Das <title>-Tag wird innerhalb des <head>-Tags verwendet, um den Dokumenttitel zu erwähnen.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">4</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><head></code></b>
|
||||||
|
<p>Dieses Tag stellt den Header des Dokuments dar, der andere HTML-Tags wie <title>, <link> usw. enthalten kann.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">5</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><body></code></b>
|
||||||
|
<p>Dieses Tag stellt den Hauptteil des Dokuments dar, der andere HTML-Tags wie <h1>, <div>, <p> usw. enthält.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">6</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><h1></code></b>
|
||||||
|
<p>Dieses Tag repräsentiert die Überschrift.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">7</td>
|
||||||
|
<td>
|
||||||
|
<b><code style="margin-left: 10px;" class="w3-codespan"><p></code></b>
|
||||||
|
<p>Dieses Tag repräsentiert einen Absatz.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p><a href="HTML-Basis Tags.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="text" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,220 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML - Kommentare</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML - Kommentare</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Die Inhalt des Körpers der Seietn -->
|
||||||
|
<div class="körper">
|
||||||
|
<h2>Was ist der Kommentar</h2>
|
||||||
|
<P>Kommentar ist ein Stück Code, das von jedem Webbrowser ignoriert wird.
|
||||||
|
Es empfiehlt sich, Kommentare in Ihren HTML-Code einzufügen, insbesondere in komplexen
|
||||||
|
Dokumenten, um Abschnitte eines Dokuments und andere Hinweise für jeden anzuzeigen,
|
||||||
|
der sich den Code ansieht. Kommentare helfen Ihnen und anderen, Ihren Code zu verstehen
|
||||||
|
und die Lesbarkeit des Codes zu verbessern. HTML-Kommentare werden zwischen <b><!-- ... --></b>Tags platziert. Daher wird jeder Inhalt, der innerhalb von <b><!-- ... --></b>
|
||||||
|
Tags platziert wird, als Kommentar behandelt und vom Browser vollständig ignoriert.</P>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!-- Dokumentkopf beginnt --></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Dies ist der Titel des Dokuments</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!-- Dokumentkopf endet --></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!-- Ich bin heading --></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Kommentare</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!-- Ich bin einen Absatz --></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>ich mag Kommentare.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis, ohne den Inhalt anzuzeigen, der als Teil von Kommentaren angegeben wurde:</p>
|
||||||
|
<img src="Die Bilder/ausgabe für kommentar.png" alt="ausgabe für kommentare.png" title="ausgabe für kommentare">
|
||||||
|
<h2>Gültige vs. ungültige Kommentare</h2>
|
||||||
|
<p>Kommentare werden nicht verschachtelt, was bedeutet, dass ein Kommentar nicht in einen
|
||||||
|
anderen Kommentar eingefügt werden kann. Zweitens darf die Doppelstrichfolge „--“
|
||||||
|
nicht innerhalb eines Kommentars erscheinen, außer als Teil des schließenden Tags „-->“.
|
||||||
|
Sie müssen auch sicherstellen, dass der Kommentaranfang keine Leerzeichen enthält.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Hier ist der angegebene Kommentar ein gültiger Kommentar und wird vom Browser gelöscht.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Beispiel für einen gültigen Kommentar</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!-- Dies ist ein gültiger Kommentar --></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Dokumenteninhalt gehört hier....</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe gültiger Kommentar.png" alt="ausgabe gültiger Kommentar.png" title="ausgabe gültiger Kommentar">
|
||||||
|
<p>Die folgende Zeile ist jedoch kein gültiger Kommentar und wird vom Browser angezeigt. Das liegt daran,
|
||||||
|
dass zwischen der linken spitzen Klammer und dem Ausrufezeichen ein Leerzeichen steht.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Beispiel für einen ungültigen Kommentar</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b>< !-- Dies ist ein ungültiger Kommentar -- ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Dokumenteninhalt gehört hier....</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe für ungültiger kommentar.png" alt="ausgabe für ungültiger kommentar.png" title="ausgabe für ungültiger kommentar">
|
||||||
|
<h2>Mehrzeilige Kommentare</h2>
|
||||||
|
<p>Bisher haben wir einzeilige Kommentare gesehen, aber HTML unterstützt auch mehrzeilige
|
||||||
|
Kommentare. Sie können mehrere Zeilen kommentieren, indem Sie das spezielle Anfangs-Tag
|
||||||
|
<b><!-- ... --></b> vor die erste Zeile und das Ende der letzten Zeile setzen,
|
||||||
|
wie im folgenden Beispiel gezeigt.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>mehrzeilige Kommentare</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px; color:green"><b><!--</b><br>
|
||||||
|
<span style="margin-left: 100px;">Dies ist ein mehrzeiliger Kommentar,der beliebig viele </span>
|
||||||
|
<br><span style="margin-left: 100px;">Zeilen umfassen kann.</span><br><b style="margin-left: 60px;">-- ></b>
|
||||||
|
</span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Dokumenteninhalt gehört hier....</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe mehrzeilige kommentare .png" alt="ausgabe mehrzeilige kommentare .png" title="ausgabe mehrzeilige kommentare">
|
||||||
|
<div class="aufgabe">
|
||||||
|
<p><a href="HTML-Tabellen.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ende der Inhalt -->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,291 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Meta Tags</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Meta Tags</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Die Inhalt des Körpers der Seiten-->
|
||||||
|
<div class="körper">
|
||||||
|
<h2>Was sind die Meta - Tags?</h2>
|
||||||
|
<p>Mit HTML können Sie Metadaten – zusätzliche wichtige Informationen zu einem Dokument
|
||||||
|
– auf vielfältige Weise angeben. Die META-Elemente können verwendet werden,
|
||||||
|
um Name/Wert-Paare einzuschließen, die Eigenschaften des HTML-Dokuments beschreiben,
|
||||||
|
wie z. B. Autor, Ablaufdatum, eine Liste von Schlüsselwörtern, Autor des Dokuments usw.
|
||||||
|
Das <b><meta></b>-Tag wird verwendet, um solche zusätzlichen Informationen bereitzustellen.
|
||||||
|
Dieses Tag ist ein leeres Element und hat daher kein schließendes Tag, trägt aber
|
||||||
|
Informationen in seinen Attributen.
|
||||||
|
Sie können ein oder mehrere Meta-Tags in Ihr Dokument einfügen, je nachdem,
|
||||||
|
welche Informationen Sie in Ihrem Dokument behalten möchten, aber im Allgemeinen
|
||||||
|
wirken sich Meta-Tags nicht auf das physische Erscheinungsbild des Dokuments aus, daher
|
||||||
|
spielt es keine Rolle, ob Sie es einfügen sie oder nicht.</p>
|
||||||
|
<h2>Hinzufügen von Meta-Tags zu Ihren Dokumenten</h2>
|
||||||
|
<p>Sie können Ihren Webseiten Metadaten hinzufügen, indem Sie <b><meta></b>-Tags in die
|
||||||
|
Kopfzeile des Dokuments einfügen, die durch die Tags <b><head></b> und <b></head></b>
|
||||||
|
dargestellt wird. Ein Meta-Tag kann zusätzlich zu den Kernattributen folgende Attribute haben.</p>
|
||||||
|
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Sr.No</th>
|
||||||
|
<th style="text-align: center;">Attribut & Beschreibung</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">1</td>
|
||||||
|
<td>
|
||||||
|
<b>Name</b>
|
||||||
|
<p>Name für die Eigenschaft. Kann alles sein. Beispiele sind Schlüsselwörter, Beschreibung, Autor, überarbeitet, Generator usw.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">2</td>
|
||||||
|
<td>
|
||||||
|
<b>content</b>
|
||||||
|
<p>Gibt den Wert der Eigenschaft an.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">3</td>
|
||||||
|
<td>
|
||||||
|
<b>scheme</b>
|
||||||
|
<p>Gibt ein Schema an, um den Wert der Eigenschaft zu interpretieren (wie im Inhaltsattribut deklariert).</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">4</td>
|
||||||
|
<td>
|
||||||
|
<b>http-equiv</b>
|
||||||
|
<p>Wird für Header von HTTP-Antwortnachrichten verwendet. Beispielsweise kann http-equiv verwendet werden, um die Seite zu aktualisieren oder ein Cookie zu setzen. Zu den Werten gehören Content-Type, Expires, Refresh und Set-Cookie.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h2>bestimmte Schlüsselwörter</h2>
|
||||||
|
<p>Sie können das <meta>-Tag verwenden, um wichtige Schlüsselwörter in Bezug auf
|
||||||
|
das Dokument anzugeben, und später werden diese Schlüsselwörter von den Suchmaschinen
|
||||||
|
verwendet, während Ihre Website für Suchzwecke indexiert wird.</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir HTML, Meta-Tags und Metadaten als
|
||||||
|
wichtige Schlüsselwörter zum Dokument hinzufügen.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Meta - Tags Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML, Meta Tags, Metadatein ></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo HTML</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe meta-tags.png" alt="ausgabe meta-tags.png" title="ausgabe meta-tags">
|
||||||
|
<h2>Dokumentbeschreibung</h2>
|
||||||
|
<p>Sie können das <meta>-Tag verwenden, um eine kurze Beschreibung
|
||||||
|
des Dokuments anzugeben. Dies kann wiederum von verschiedenen
|
||||||
|
Suchmaschinen verwendet werden, während Ihre Website für Suchzwecke
|
||||||
|
indexiert wird.</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Meta - Tags Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML, Meta Tags, Metadatein" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie Meta-Tags." ></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo HTML</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<h2>Dokumentaktualisierung</h2>
|
||||||
|
<p>Ein <meta>-Tag kann verwendet werden, um eine Dauer anzugeben, nach der Ihre Webseite automatisch aktualisiert wird.</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<p>Wenn Sie möchten, dass Ihre Seite alle 5 Sekunden aktualisiert wird, verwenden Sie die folgende Syntax.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Meta - Tags Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML, Meta Tags, Metadatein" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie Meta-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "refresh" content = "5" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo HTML</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<h2>Seitenumleitung</h2>
|
||||||
|
<p>Sie können das <meta>-Tag verwenden, um Ihre Seite auf eine andere
|
||||||
|
Webseite umzuleiten. Sie können auch eine Dauer angeben, wenn Sie die Seite
|
||||||
|
nach einer bestimmten Anzahl von Sekunden umleiten möchten.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Meta - Tags Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML, Meta Tags, Metadatein" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie Meta-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "refresh" content = "5" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "refresh" content = "5; url = http://www.google.com" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo HTML</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Im Folgenden finden Sie ein Beispiel für die Umleitung der aktuellen Seite
|
||||||
|
auf eine andere Seite nach 5 Sekunden. Wenn Sie die Seite sofort umleiten
|
||||||
|
möchten, geben Sie kein Inhaltsattribut an.</p>
|
||||||
|
<h2>Autorenname einstellen</h2>
|
||||||
|
<p>Sie können einen Autorennamen auf einer Webseite mithilfe von Meta-Tags festlegen. Siehe ein Beispiel unten −</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Meta - Tags Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML, Meta Tags, Metadatein" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie Meta-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "refresh" content = "5" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "refresh" content = "5; url = http://www.google.com" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo HTML</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a><br><br>
|
||||||
|
<div class="aufgabe">
|
||||||
|
<p><a href="HTML-Kommentar.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End der Seiten-->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,366 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Tabellen</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Tabellen</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Die Inhalt des Körpers der Seiten-->
|
||||||
|
<div class="körper">
|
||||||
|
<p>Die HTML-Tabellen ermöglichen es, Daten wie Text, Bilder, Links, andere Tabellen usw.
|
||||||
|
in Zeilen und Spalten von Zellen anzuordnen. Die HTML-Tabellen werden mit dem
|
||||||
|
<b><table></b>-Tag erstellt, in dem das <b><tr></b>-Tag zum
|
||||||
|
Erstellen von Tabellenzeilen und das <b><td></b>-Tag zum Erstellen von
|
||||||
|
Datenzellen verwendet wird. Die Elemente unter <b><td></b> sind
|
||||||
|
standardmäßig regulär und linksbündig ausgerichtet</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML Tabellen</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><table border = "1"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br> <br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe für die Tabelle.png" alt="ausgabe die Tabelle.png" title="ausgabe für die Tabelle">
|
||||||
|
<p>Hier ist der Rahmen ein Attribut des <b><td></b>-Tags und wird verwendet,
|
||||||
|
um einen Rahmen über alle Zellen zu legen. Wenn Sie keinen Rahmen benötigen,
|
||||||
|
können Sie border = "0" verwenden.</p>
|
||||||
|
<h2>Tabellenüberschrift</h2>
|
||||||
|
<p>Die Tabellenüberschrift kann mit dem Tag <b><th></b> definiert werden.
|
||||||
|
Dieses Tag ersetzt das <b><td></b>-Tag, das zur Darstellung der eigentlichen
|
||||||
|
Datenzelle verwendet wird. Normalerweise setzen Sie Ihre oberste Zeile als
|
||||||
|
Tabellenüberschrift, wie unten gezeigt, ansonsten können Sie das Element <b><th></b>
|
||||||
|
in jeder Zeile verwenden. Überschriften, die im <b><th></b>-Tag definiert sind,
|
||||||
|
werden standardmäßig zentriert und fett dargestellt.
|
||||||
|
</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML Tabellen</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
|
||||||
|
<span style="margin-left: 60px;"><b><table border = "1"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><th></span></b></span>
|
||||||
|
<span>Name</span>
|
||||||
|
<span><b></th></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><th></span></b></span>
|
||||||
|
<span>Gehalt</span>
|
||||||
|
<span><b></th></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br><br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Herr Müller</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>5000€</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br> <br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Herr Schneider</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>7000€</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span>
|
||||||
|
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe 4.png" alt="ausabe tabelle .png" title="Die Tabelle mit Kopfzeile">
|
||||||
|
<h2>Cellpadding- und Cellspacing-Attribute</h2>
|
||||||
|
<p>Es gibt zwei Attribute namens cellpadding und cellpacing, mit denen Sie den
|
||||||
|
Leerraum in Ihren Tabellenzellen anpassen können. Das Attribut „cellspacing“
|
||||||
|
definiert den Abstand zwischen Tabellenzellen, während „cellpadding“ den
|
||||||
|
Abstand zwischen Zellgrenzen und dem Inhalt innerhalb einer Zelle darstellt.
|
||||||
|
</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML Tabellen - Cellpadding- und Cellspacing-Attribute</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
|
||||||
|
<span style="margin-left: 60px;"><b><table border = "1"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><th></span></b></span>
|
||||||
|
<span>Spalte 1</span>
|
||||||
|
<span><b></th></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><th></span></b></span>
|
||||||
|
<span>Spalt 2</span>
|
||||||
|
<span><b></th></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><th></span></b></span>
|
||||||
|
<span>Spalte 3</span>
|
||||||
|
<span><b></th></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br><br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td rowsoan = "2"></span></b></span>
|
||||||
|
<span>Zeile 1 Zelle 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1 Zelle 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1 Zelle 3</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br> <br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2 Zelle 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2 Zelle 3</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br><br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td colspan = "3"></span></b></span>
|
||||||
|
<span>Zeile 3 zelle 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span>
|
||||||
|
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe die tabelle 3.png" alt="ausgabe die tabelle 3.png" title="Die Tabelle">
|
||||||
|
<h2>Tabelle Höhe-Breite</h2>
|
||||||
|
<p>Sie können eine Tabellenbreite und -höhe mit den Attributen width und height festlegen.
|
||||||
|
Sie können die Tabellenbreite oder -höhe in Pixeln oder in Prozent der verfügbaren Bildschirmfläche
|
||||||
|
angeben.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML Tabellen</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><table border = "1" width= "400" height = "150"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br> <br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabeb der Tabelle 4.png" alt="ausgabe der Tabelle .png" title="Tabelle Höhe-Breite">
|
||||||
|
<h2>Tabellenüberschrift (Caption)</h2>
|
||||||
|
<p>Das Beschriftungs-Tag <b><caption></b> <b></caption></b> dient als Titel oder Erklärung für die Tabelle und wird
|
||||||
|
oben in der Tabelle angezeigt.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML Tabellen</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><table border = "1" width = "100%"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><caption></b></span>
|
||||||
|
<span>Das ist der Caption (Überschrift)</span>
|
||||||
|
<span><b></caption></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 1, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span><br> <br>
|
||||||
|
|
||||||
|
<span style="margin-left: 100px;"><b><tr></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 1</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 140px;"><b><td></span></b></span>
|
||||||
|
<span>Zeile 2, Spalte 2</span>
|
||||||
|
<span><b></td></span></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b></tr></span></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis −</p>
|
||||||
|
<img src="Die Bilder/ausgabe tabelle 5.png" alt="ausgabe tabelle .png" title="ausgabe Tabelle mit caption">
|
||||||
|
<div class="aufgabe">
|
||||||
|
<p><a href="HTMl-Listen.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End der Inhalt-->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,247 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Text Links</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Text Links</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Die Inhalt des Körpers der Seiten-->
|
||||||
|
<div class="körper">
|
||||||
|
<p>Eine Webseite kann verschiedene Links enthalten, die Sie direkt zu anderen Seiten und
|
||||||
|
sogar zu bestimmten Teilen einer bestimmten Seite führen. Diese Links werden als
|
||||||
|
Hyperlinks bezeichnet. Hyperlinks ermöglichen es Besuchern, zwischen Websites zu
|
||||||
|
navigieren, indem sie auf Wörter, Ausdrücke und Bilder klicken. So können Sie Hyperlinks
|
||||||
|
mit Text oder Bildern erstellen, die auf einer Webseite verfügbar sind.</p>
|
||||||
|
|
||||||
|
<h2>Verknüpfen von Dokumenten</h2>
|
||||||
|
<p>Ein Link wird mit dem HTML-Tag <b><a></b> angegeben. Dieses Tag wird Anchor-Tag genannt und
|
||||||
|
alles zwischen dem öffnenden <b><a></b>-Tag und dem schließenden <b></a></b>-Tag wird Teil des Links und
|
||||||
|
ein Benutzer kann auf diesen Teil klicken, um zum verlinkten Dokument zu gelangen.
|
||||||
|
Es folgt die einfache Syntax zur Verwendung des <b><a></b>-Tags.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p style="width: 100%;padding:10px"><b><a href = "Document oder Webseite URL" ...attributes-list> Text Link </a></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Lassen Sie uns folgendes Beispiel ausprobieren, das http://www.google.com auf Ihrer Seite verlinkt −</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Hyperlink Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Klicken Sie auf den folgenden Link.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com>Google</a></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a><br>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis, bei dem Sie auf den generierten Link klicken können, um zur Homepage von Google (in diesem Beispiel) zu gelangen.</p>
|
||||||
|
<img src="Die Bilder/ausgabe für das Link 2.png" alt="ausgabe für das Link 2.png" title="ausgabe für das Link ">
|
||||||
|
<h2>Das Zielattribut</h2>
|
||||||
|
<p>Wir können das Zielattribut in unseren Tags verwenden. Diese Attribute werden
|
||||||
|
verwendet, um den Ort anzugeben, an dem das verknüpfte Dokument geöffnet wird.
|
||||||
|
Im Folgenden sind die möglichen Optionen aufgeführt −</p>
|
||||||
|
<table class="table">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th>Sr.No</th>
|
||||||
|
<th style="text-align: center;">Option & Beschreibung</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">1</td>
|
||||||
|
<td>
|
||||||
|
<b>_blank</b>
|
||||||
|
<p>Öffnet das verknüpfte Dokument in einem neuen Fenster oder Tab.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">2</td>
|
||||||
|
<td>
|
||||||
|
<b>_self</b>
|
||||||
|
<p>Öffnet das verknüpfte Dokument im gleichen Frame.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">3</td>
|
||||||
|
<td>
|
||||||
|
<b>_parent</b>
|
||||||
|
<p>Öffnet das verknüpfte Dokument im übergeordneten Frame.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">4</td>
|
||||||
|
<td>
|
||||||
|
<b>_top</b>
|
||||||
|
<p>Öffnet das verknüpfte Dokument im gesamten Fensterbereich.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="ts">5</td>
|
||||||
|
<td>
|
||||||
|
<b>targetframe</b>
|
||||||
|
<p>Öffnet das verknüpfte Dokument in einem benannten Zielframe.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>BeispielDie Bilder/</p>
|
||||||
|
<p>Versuchen Sie das folgende Beispiel, um den grundlegenden Unterschied in einigen Optionen zu verstehen, die für das Zielattribut angegeben werden.</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Hyperlink Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Klicken Sie auf den folgenden Link.</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com target="_blank" >Google</a></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com target="_self">Google</a></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com target="_parent">Google</a></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com target="_top">Google</a></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href = "https://www.google.com target="targetframe">Google</a></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a><br>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis, bei dem Sie auf verschiedene Links klicken können, um den Unterschied zwischen verschiedenen Optionen für das Zielattribut zu verstehen.</p>
|
||||||
|
<img src="Die Bilder/ausgabe für das Linke 3.png" alt="ausgabe für das Linke .png" title="ausgabe der Beispiele">
|
||||||
|
<h2>Download links</h2>
|
||||||
|
<p>Sie können einen Textlink erstellen, um Ihre PDF-, DOC- oder ZIP-Dateien herunterladbar
|
||||||
|
zu machen. Das ist sehr einfach; Sie müssen nur die vollständige URL der herunterladbaren
|
||||||
|
Datei wie folgt angeben −</p>
|
||||||
|
<p>Beispeil</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Hyperlink Beispiel</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Sie können den Dokument herunterladen</span>
|
||||||
|
<span><b></p></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><a href="https://www.Beispeil Dokument.com/page.pdf">Download PDF File</a></span></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a><br>
|
||||||
|
<p>Dadurch wird der folgende Link erstellt und zum Herunterladen einer Datei verwendet.</p>
|
||||||
|
<img src="Die Bilder/ausgabe für das Link 5.png" alt="ausgabe für das Link.png" title="ausgabe für das Link">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End der Seite-->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,457 @@
|
||||||
|
<?php include("Datenbanken.php");?>
|
||||||
|
<?php include_once ("Schicke Nachricht.php");?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!--Beginn der Seite-->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<!--Beginn des Kopfes-->
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Mit uns können Sie HTML & CSS kostenlos lernen.">
|
||||||
|
<meta name="keywords" content="HTML">
|
||||||
|
<meta name="author" content="Obai Albek">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link href="CSS/für den Kurs.css" rel="stylesheet">
|
||||||
|
<title>HTML-Listen</title>
|
||||||
|
</head>
|
||||||
|
<!--Ende des Kopfes-->
|
||||||
|
|
||||||
|
<!--Begin des Körpers-->
|
||||||
|
<body>
|
||||||
|
<form method="POST">
|
||||||
|
<!--Der Heder -->
|
||||||
|
<div class="header">
|
||||||
|
<h1>HTML-Listen</h1>
|
||||||
|
</div>
|
||||||
|
<!-- die Listen -->
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="Homepage.php">Home</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1>Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"> rfqre3ewqe</span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profile</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<div class="seite2" style="height:200px;">
|
||||||
|
<img style="width: 140%; border-bottom:1px solid" src="Die Bilder/O_V3schools-removebg-preview.png">
|
||||||
|
<img style="width: 80%; margin-left:70px;border-bottom: 1px solid red" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5 Foto">
|
||||||
|
<ul class="lists">
|
||||||
|
<a href="HTML-Eiführung.php"><li>HTML - Einführung</li></a>
|
||||||
|
<a href="HTML-Basis Tags.php"><li>HTML - Basis Tags</li></a>
|
||||||
|
<a href="HTML-Meta Tags.php"><li>HTML - Meta Tags</li></a>
|
||||||
|
<a href="HTML-Kommentar.php"><li>HTML - Kommentare</li></a>
|
||||||
|
<a href="HTML-Tabellen.php"><li>HTML - Tabellen</li></a>
|
||||||
|
<a href="HTMl-Listen.php"><li>HTML - Listen</li></a>
|
||||||
|
<a href="HTML-Text Links.php"><li>HTML - Text Links</li></a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Die Inhalt des Körpers der Seiten-->
|
||||||
|
<div class="körper">
|
||||||
|
<h2>Was sind die Listen in HTML?</h2>
|
||||||
|
<p> HTML bietet Webautoren drei Möglichkeiten, Informationslisten anzugeben. Alle Listen müssen ein oder mehrere Listenelemente enthalten. Listen können −
|
||||||
|
enthalten −</p>
|
||||||
|
<ul>
|
||||||
|
<li><b><ul></b>:Eine ungeordnete Liste. Dadurch werden Elemente mit einfachen Aufzählungszeichen aufgelistet.</li>
|
||||||
|
<li><b><ol></b>:Eine geordnete Liste. Dadurch werden verschiedene Nummernschemata verwendet, um Ihre Artikel aufzulisten.</li>
|
||||||
|
<li><b><dl></b>:Eine Definitionsliste. Dadurch werden Ihre Elemente auf die gleiche Weise angeordnet, wie sie in einem Wörterbuch angeordnet sind.</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Ungeordnete HTML-Listen</h2>
|
||||||
|
<p>Eine ungeordnete Liste ist eine Sammlung verwandter Elemente, die keine besondere Reihenfolge oder Reihenfolge haben. Diese Liste wird mithilfe des HTML-<b><ul></b>-Tags erstellt. Jedes Element in der Liste ist mit einem Aufzählungszeichen gekennzeichnet.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ul></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Beetroot</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Ginger</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Potato</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Radish</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ul></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe der lists.png" alt="ausgabe der lists.png" title="Die Lists">
|
||||||
|
<h2>Das Typattribut</h2>
|
||||||
|
<p>Sie können das Typattribut für das <b><ul></b>-Tag verwenden, um den gewünschten Aufzählungstyp anzugeben. Standardmäßig ist es eine Disc. Im Folgenden sind die möglichen Optionen aufgeführt:</p>
|
||||||
|
<ul>
|
||||||
|
<li><b><ul type = "square"></b></li>
|
||||||
|
<li><b><ul type = "disc"></b></li>
|
||||||
|
<li><b><ul type = "circle"></b></li>
|
||||||
|
</ul>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ul type = "square"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ul type = "square"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Javascript</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Java</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ul></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 2.png" alt="ausgabe lists 2.png" title="Die Lsits">
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir<ul type = "disc">verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ul type = "disc"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Javascript</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Java</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ul></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 3.png" alt="ausgabe lists 3.png" title="Die disc Lists">
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ul type = "circle"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ul type = "circle"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Javascript</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Java</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ul></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 4.png" alt="ausgabe lists 4.png" title="Die circle lists">
|
||||||
|
<h2>HTML-geordnete Lists</h2>
|
||||||
|
<p>Wenn Sie Ihre Artikel in eine nummerierte Liste anstatt in eine Liste mit Aufzählungszeichen
|
||||||
|
einfügen müssen, wird eine geordnete HTML-Liste verwendet. Diese Liste wird mit dem Tag <ol> erstellt.
|
||||||
|
Die Nummerierung beginnt bei eins und wird für jedes aufeinanderfolgende geordnete Listenelement, das mit <li> gekennzeichnet ist, um eins erhöht.</p>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML geordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ol></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>HTML</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>CSS</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Javascript</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Java</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ol></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 6.png" alt="ausgabe lists .png" title="Die Lists">
|
||||||
|
<ul>
|
||||||
|
<li><ol type = "1"> - Nummerierte Liste</li>
|
||||||
|
<li><ol type = "I"> - Römische Nummernliste</li>
|
||||||
|
<li><ol type = "i"> - Liste der römischen Zahlen in Kleinbuchstaben</li>
|
||||||
|
<li><ol type = "A"> - Buchstabenliste</li>
|
||||||
|
<li><ol type = "a"> - Liste der Kleinbuchstaben</li>
|
||||||
|
</ul>
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ol type = "A"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ol type = "A"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Pfirsich</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Aprikose</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Banane</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Erdbeere</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ol></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 7.png" alt="ausgabe lists 7.png" title="Die lists">
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ol type = "a"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ol type = "a"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Pfirsich</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Aprikose</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Banane</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Erdbeere</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ol></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 10.png" alt="ausgabe lists .png" title="Die Lists">
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ol type = "I"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ol type = "I"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Pfirsich</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Aprikose</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Banane</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Erdbeere</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ol></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists .png" alt="ausgabe lists .png" title="Die Lsits">
|
||||||
|
<p>Beispiel</p>
|
||||||
|
<p>Im Folgenden sehen Sie ein Beispiel, in dem wir <ol type = "i"> verwendet haben</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>HTML ungeordnete Liste</span>
|
||||||
|
<span><b></title></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "keywords" content = "HTML lernen" ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "description" content = "Lernen Sie HTML-Tags." ></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><meta name = "author" content = "Obai Albek" ></b></span><br>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><ol type = "i"></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Pfirsich</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Aprikose</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Banane</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 100px;"><b><li></b></span>
|
||||||
|
<span>Erdbeere</span>
|
||||||
|
<span><b></li></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b></ol></b></span><br>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
<p>Dies führt zu folgendem Ergebnis:</p>
|
||||||
|
<img src="Die Bilder/ausgabe lists 42.png" alt="ausgabe lists 42.png" title="Die Lists.png">
|
||||||
|
<div class="aufgabe">
|
||||||
|
<p><a href="HTML-Text Links.php" class="weiter">Weiter</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--End der Inhalt-->
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!--Footer-->
|
||||||
|
<form method="POST">
|
||||||
|
<div class="footer">
|
||||||
|
<h1>Hinterlasse eine Antwort</h1>
|
||||||
|
<p>Ihre Email-Adresse wird nicht veröffentlicht. erforderliche Felder sind markiert<span style="color: red;margin-left:5px">*</span></p>
|
||||||
|
<p>Kommentar *</p>
|
||||||
|
<p><input id="author" name="name" type="text" value="" size="30" placeholder="Name *" requierd></p>
|
||||||
|
<P><input id="email" name="email" type="email" value="" size="30" placeholder="Email *" requierd></P>
|
||||||
|
<P><input id="email" name="subject" type="text" value="" size="30" placeholder="Thema *" requierd></P>
|
||||||
|
<textarea autocomplete="new-password" placeholder="Schicken Sie uns Ihre nachricht" id="comment" name="message" cols="55" rows="8" aria-required="true"></textarea>
|
||||||
|
<p><input class ="send" id="submit" name="submit" type="submit" value="submit"></p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>Urheberrechte 2023 © OV-Codeschule</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<!--Ende des Körpers-->
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<?php include_once ("for die Registieren.php"); ?>
|
||||||
|
<?php
|
||||||
|
$query = "SELECT * FROM registration WHERE ID ";
|
||||||
|
$ergebnisse = $dbh->query($query);
|
||||||
|
foreach($ergebnisse as $row);
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<title>Homepage</title>
|
||||||
|
<link rel="stylesheet" href="CSS/für die Homepage.css">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/png" href="O_V3schools-removebg-preview.png">
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
.abmelden{
|
||||||
|
display: inline-block;
|
||||||
|
color: #666;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border: 1px dotted #ccc;
|
||||||
|
padding: 6px 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="header">
|
||||||
|
<h1>Lernen Sie To Code</h1>
|
||||||
|
<p>Mit der weltweit größten Website für Webentwickler.</p>
|
||||||
|
<p>Herzlich Willkommen <?php echo "<span style = color:white>".$row['firstName']." ".$row['lastName']. "</span>"; ?></p>
|
||||||
|
</div>
|
||||||
|
<div class="navbar">
|
||||||
|
<a href="HTML-Eiführung.php">HTML</a>
|
||||||
|
<a href="CSS-Einführung.php">CSS</a>
|
||||||
|
<a href="Der Test/index.php">HTML-Test</a>
|
||||||
|
<a href="Der Test CSS/index.php">CSS-Test</a>
|
||||||
|
<a class="kontakt">
|
||||||
|
Kontakt
|
||||||
|
<div class="kontakt">
|
||||||
|
<h1 style="margin-left: 27%; font-size: 25px;">Lassen Sie uns Kontakt aufnehmen</h1>
|
||||||
|
<p style="text-align: center;">Wir sind offen für jeden Vorschlag oder einfach nur für ein Gespräch</p>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span >Adresse: Deutschland, Baden-Württemberg, mannheim-Gärtnerstraße.25</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>Telefonnummer: +49 178 3740356</span><br>
|
||||||
|
<span class="material-icons"></span>
|
||||||
|
<span>E-Mail: obay.albeek@gmail.com</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a class="überuns" href="Über uns.php">Über uns </a>
|
||||||
|
<a class="profile" href="konto_zeigen.php">Profil</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="zeile">
|
||||||
|
<div class="seite">
|
||||||
|
<img style="display: block; width:90%;margin-top:120px;user-select: none;" src="Die Bilder/HTML 5 Foto.png" alt="HTML 5">
|
||||||
|
<img style="display: block; width:90%;margin-top:220px;border-top:1px solid red;user-select: none;" src="Die Bilder/CSS.png" alt="HTML 5">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="körper">
|
||||||
|
<div class="beispiel">
|
||||||
|
<p>HTML Beispiel:</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p><b><!DOCTYPE html></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><html></b></p>
|
||||||
|
<p><b><head></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><title></b></span>
|
||||||
|
<span>Dies ist der Titel des Dokuments</span>
|
||||||
|
<span><b></title></b></span>
|
||||||
|
<p><b style="margin-left: 20px;"></head></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b><body></b></p>
|
||||||
|
<span style="margin-left: 60px;"><b><h1></b></span>
|
||||||
|
<span>Das ist heading (Überschrift).</span>
|
||||||
|
<span><b></h1></b></span><br>
|
||||||
|
<span style="margin-left: 60px;"><b><p></b></span>
|
||||||
|
<span>Hallo Welt.</span>
|
||||||
|
<span><b></p></b></span>
|
||||||
|
<p style="margin-left: 20px;"><b></body></b></p>
|
||||||
|
<p style="margin-left: 20px;"><b></html></b></p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
</div>
|
||||||
|
<h1>HTML5</h1>
|
||||||
|
<p style="font-size:20px">Die Sprache zum Erstellen von Webseiten</p>
|
||||||
|
<a class="lerne" href="HTML-Eiführung.php">Lerne HTML</a>
|
||||||
|
|
||||||
|
<div class="css">
|
||||||
|
<div class="beispiel">
|
||||||
|
<p>CSS Beispiel:</p>
|
||||||
|
<div class="code">
|
||||||
|
<code>
|
||||||
|
<p>body {</p>
|
||||||
|
<span style="margin-left: 70px;">background-color:black;</span>
|
||||||
|
<p>}</p>
|
||||||
|
<p>h1 {</p>
|
||||||
|
<span style="margin-left: 70px;">color: white;</span><br>
|
||||||
|
<span style="margin-left: 70px;">text-align:center;</span>
|
||||||
|
<p>}</p>
|
||||||
|
<p>p {</p>
|
||||||
|
<span style="margin-left:70px;">font-family:</span><span>arial;</span>
|
||||||
|
<p>}</p>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<a href="selbst_versuch_css.php" target="_blank"><input class="try" type="button" name="try" value="Versuchen Sie selbst"></a>
|
||||||
|
</div>
|
||||||
|
<h1>CSS</h1>
|
||||||
|
<p style="font-size:20px">Die Sprache zum Gestalten von Webseiten</p>
|
||||||
|
<a class="lerne" href="CSS-Einführung.php">Lerne CSS</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<h2> Urheberrechte 2023 © OV-Codeschule</h2>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Passwort zurückgesetzt</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 14px 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
button a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
background-color: #3e8e41;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Super! Ihr Passwort wurde zurückgesetzt.</h1>
|
||||||
|
<button><a href="Anmelden.php">Weiter</a></button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Ändere Deine Daten</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
|
||||||
|
width: 500px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
input[type="text"], input[type="email"], input[type="number"],input[type="password"], select {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 90%;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
input[type="submit"] {
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form method = "post">
|
||||||
|
<h2>Ändere Ihre Daten</h2>
|
||||||
|
<label for="vorname">Vorname:</label>
|
||||||
|
<input type="text" id="vorname" name="vorname"><br>
|
||||||
|
|
||||||
|
<label for="nachname">Nachname:</label>
|
||||||
|
<input type="text" id="nachname" name="nachname"><br>
|
||||||
|
|
||||||
|
<label for="email">E-Mail:</label>
|
||||||
|
<input type="email" id="email" name="email"><br>
|
||||||
|
|
||||||
|
<label for="email2">E-Mail wiederholen (wenn geändert):</label>
|
||||||
|
<input type="email" id="email2" name="email2"><br>
|
||||||
|
|
||||||
|
<label for="land">Land:</label>
|
||||||
|
<input type="text" id="land" name="land"><br>
|
||||||
|
|
||||||
|
<label for="number">Telefonnummer:</label>
|
||||||
|
<input type="number" id="number" name="number"><br>
|
||||||
|
|
||||||
|
<label for="password">Kennwort:</label>
|
||||||
|
<input type="password" id="password" name="password"><br>
|
||||||
|
|
||||||
|
<label for="password2">Kennwort wiederholen (wenn geändert):</label>
|
||||||
|
<input type="password" id="password2" name="password2"><br>
|
||||||
|
|
||||||
|
<input type="submit" value="Speichern" name="submit">
|
||||||
|
</form>
|
||||||
|
<?php include_once("Datenbanken.php"); ?>
|
||||||
|
<?php
|
||||||
|
session_start();
|
||||||
|
if(!empty($_POST["submit"])){
|
||||||
|
$vorname = $_POST["vorname"];
|
||||||
|
$nachname = $_POST["nachname"];
|
||||||
|
|
||||||
|
$neu_email = $_POST["email"];
|
||||||
|
$neu_email2 = $_POST["email"];
|
||||||
|
|
||||||
|
$land = $_POST["land"];
|
||||||
|
$telefonnummer = $_POST["number"];
|
||||||
|
|
||||||
|
$password = $_POST["password"];
|
||||||
|
$re_password = $_POST["password2"];
|
||||||
|
|
||||||
|
|
||||||
|
// Erhalten Sie E-Mails von Cookies, die vor dem Zugriff auf diese Seite gesetzt wurden.
|
||||||
|
$email = $_SESSION["email"];
|
||||||
|
|
||||||
|
// Wählen Sie die passende E-Mail aus der Datenbank aus.
|
||||||
|
$query = "SELECT * FROM registration WHERE email = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$email]);
|
||||||
|
|
||||||
|
// Holen Sie sich die gesamte Zeile und ID.
|
||||||
|
$row = $stmt->fetch();
|
||||||
|
$user_ID = $row["ID"];
|
||||||
|
|
||||||
|
|
||||||
|
// Handler für Kennwort änderungen.
|
||||||
|
if (!empty($password)){
|
||||||
|
// Länge des Passworts prüfen.
|
||||||
|
if (strlen($password) < 8){
|
||||||
|
exit ("<script>alert('Das Kennwort soll nicht kleiner als 8 Zeichen sein.');</script>");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Überprüfen, ob die Passwörter übereinstimmen.
|
||||||
|
if ($password != $re_password){
|
||||||
|
exit ("<script>alert('Passwörter stimmen nicht überein.');</script>");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aktualiseren das Passwort in der Datenbank.
|
||||||
|
$query = "UPDATE registration SET `password` = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$hash = password_hash($password, PASSWORD_DEFAULT);
|
||||||
|
$stmt->execute([$hash, $user_ID]);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Handler für E-Mail änderungen.
|
||||||
|
if (!empty($neu_email)){
|
||||||
|
// Überprüfen, ob die E-Mails übereinstimmen.
|
||||||
|
if ($neu_email != $neu_email2){
|
||||||
|
exit ("<script>alert('E-mails stimmen nicht überein.');</script>");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aktualiseren das E-Mail in der Datenbank.
|
||||||
|
$query = "UPDATE registration SET `email` = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$neu_email, $user_ID]);
|
||||||
|
$_SESSION["email"] = $neu_email;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (!empty($vorname)) {
|
||||||
|
$query = "UPDATE registration SET firstName = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$vorname, $user_ID]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($nachname)) {
|
||||||
|
$query = "UPDATE registration SET lastName = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$nachname, $user_ID]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($land)) {
|
||||||
|
$query = "UPDATE registration SET land = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$land, $user_ID]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!empty($telefonnummer)) {
|
||||||
|
$query = "UPDATE registration SET `number` = ? WHERE ID = ?";
|
||||||
|
$stmt = $dbh->prepare($query);
|
||||||
|
$stmt->execute([$telefonnummer, $user_ID]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Erfolgsmeldung
|
||||||
|
echo "<script>alert('Ihre Daten wurden erfolgreich geändert.');</script>";
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Jetzt registrieren
|
||||||
|
</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="author" content="Obai & Viktor">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="CSS/für die Registieren.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="login-box">
|
||||||
|
<h1>Jetzt registrieren</h1>
|
||||||
|
|
||||||
|
|
||||||
|
<form method="post">
|
||||||
|
<label class="genlab">Geschlecht<span style="color:red">*</span></label>
|
||||||
|
<div class="gender">
|
||||||
|
|
||||||
|
|
||||||
|
<label for="male">
|
||||||
|
<input type="radio" name="gender" value="m" id="male" class="radio" required/> Männlich
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="rest">
|
||||||
|
<label for="female" >
|
||||||
|
<input type="radio" name="gender" value="f" id="female" class="radio" required/>Weiblich
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label for="others">
|
||||||
|
<input type="radio" name="gender" value="o" id="others" class="radio" required/>Divers
|
||||||
|
</label><br>
|
||||||
|
|
||||||
|
</div></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<label for="firstName">Vorname<span>*</span></label>
|
||||||
|
<input type="text" id="firstName" name="firstName" placeholder="Ihren Vorname" class="textInput" required>
|
||||||
|
|
||||||
|
<label for="lastName">Nachname<span>*</span></label>
|
||||||
|
<input type="text" id="lastName" name="lastName" placeholder="Ihren Nachname" class="textInput" required>
|
||||||
|
|
||||||
|
<label for="geburt">Geburtstag<span>*</span></label>
|
||||||
|
<input type="date" id="geburt" name="geburt" required placeholder="Ihren Geburtstag" class="textInput">
|
||||||
|
|
||||||
|
<label for="email">E-Mail<span>*</span></label>
|
||||||
|
<input type="text" id="email" name="email" placeholder="Ihre E-Mail" class="textInput" >
|
||||||
|
|
||||||
|
<label for="password">Kennwort<span>*</span></label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="Ihr Kennwort" class="textInput" style="margin-bottom: 1px; padding-right: 20.5px" required >
|
||||||
|
<br>
|
||||||
|
<input type="checkbox" onclick="myFunction()" id="zeige_pass"> Kennwort anzeigen
|
||||||
|
<br><br>
|
||||||
|
<label for="number">Telefonnummer<span>*</span></label>
|
||||||
|
<input type="number" id="number" name="number" placeholder="Ihre Telefonnummer" class="textInput" style="padding-right: 20.5px" required/>
|
||||||
|
|
||||||
|
<label for="land">Land<span>*</span></label>
|
||||||
|
<input type="text" id="land" name="land" placeholder="Ihre Land" class="textInput" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Anmelden"><br><br>
|
||||||
|
<?php include "for die Registieren.php"; ?>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue