Hier folgt mein Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<script type="text/javascript">
function geladen()
{ alert("Dokument wurde geladen"); }
function geclickt(bezeichnung)
{ alert("Geclickt: " + bezeichnung); }
function neu()
{
document.open();
document.write("<html><body>Hallo Welt<\/body><\/html>");
document.close();
}
</script>
</head>
<title>SchaeffKochbuch</title>
<link rel="stylesheet" href="
https://www.w3schools.com/w3css/4/w3.css">
<style>
div.scrollmenu {
background-color: green;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
html,body {font-family:"Verdana",sans-serif
}
h1,h2,h3,h4,h5,h6 {font-family:"Segoe UI",sans-serif}
h3 {
color: black;
}
h1 {
color: magenta;
font-size: 50px;
}
p.normal {
font-weight: normal;
}
p.thicker {
font-weight: 900;
}
<!--
a {
color: black;
font-size: 25px;
}
-->
div {
padding: 20px;
width: 100%;
resize: both;
overflow: auto;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
} /* green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {
background-color: #f44336;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
<script src=""></script>
<body>
<!-- Text im Bild
/* This is a single-line comment */ -->
<div class="w3-display-container">
<!-- Comment: image vom Server NAS3 -->
<img src="
http://retslop-subdom5a.synology.me/wp-content/uploads/Fotos/Kochbuch/Cook_14.jpg" alt="LA" style="width:100%">
<!-- -->
<div class="w3-display-topleft w3-container">
<h1>Schäff is Chef!!</h1
<a href="
http://retslop-subdom5a.synology.me...P_SQL-Tests/Kochbuch/Bedienungsanleitung.html" <h3>Hilfe</h3></a>
</div>
<div class="w3-display-bottomleft w3-container w3-yellow">
<h3>Never trust a skinny cook!!</h3>
</div>
<div class="scrollmenu">
<a href="
http://retslop-subdom5a.synology.me/wp-content/uploads/PHP_SQL-Tests/Kochbuch/Vorspeisen.html">Vorspeisen</a>
<a href="
http://retslop-subdom5a.synology.me/wp-content/uploads/PHP_SQL-Tests/Kochbuch/Hauptspeisen.html">Hauptspeisen</a>
<input type="button" value="Beilagen" onclick="geclickt('Beilagen');">
<input type="button" value="Desserts" onclick="geclickt('Desserts');">
<input type="button" value="Saucen" onclick="geclickt('Saucen');">
<input type="button" value="Gemüse" onclick="geclickt('Gemüse');">
<input type="button" value="Backen" onclick="geclickt('Backen');">
<input type="button" value="Getränke" onclick="geclickt('Getränke');">
<a href="
http://retslop-subdom5a.synology.me/wp-content/uploads/PHP_SQL-Tests/Kochbuch/SchaeffKochbuch.html">NeuStart</a>
</div>
<!--
-->
<!-- Comment: Text im Bild -->
</body>
</html>
