WEBALGO.CH: Algorithmen für das WEB

Dies ist die Vorlagewebsite
Download der dieser Website zugrundeliegenden Dateien

Hier folgt der Inhalt der Hauptseite. Die Schriftart und -Farbe ist durch die zentrale Datei stylesheet.css gesteuert: <sr class="schrift1">Text</sr>
Die Abstände an den Rändern links und rechts werden durch <img src="ph.png" height="10" width="200"> definiert.

Lernen durch Üben: Studieren Sie den Aufbau der einzelnen Dateien und üben Sie indem Sie die Dateien herunterladen, nach Ihren Wünschen bearbeiten/verändern und auf Ihren Server hochladen (.php-Dateien können nur auf einem Server getestet werden) und in Ihrem Browser testen!

Wenn Sie eine neue Unterseite erstellen kopieren Sie die Datei index.php und nennen Sie die neue Datei z.B. unterseite1.php. Den neuen Inhalt erstellen Sie in einer Seite mit dem Namen inhalt1.php. In der Datei unterseite1.php ändern Sie php include 'hauptteil.php' zu php include 'inhalt1.php' usf. So müssen Sie wenn Sie z.B. das Menue ändern nur 1 Datei ändern da diese Datei auf jeder Unterseite jeweils dynamisch eingefügt wird.

Um zu beginnen erstellen Sie Ihre eigene Datei hauptteil.php in ihrem Texteditor z.B. von Windows und fügen nachfolgendes ein:


<html>
<head>
<title>Titel Ihrer Website</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
</body>
</html>

Download Datei htmlgrundgeruest.html beinhaltend obigen HTML-Code. Nach download in index.html oder index.php umbenennen! Hauptseiten einer Website lauten immer index.

Um PHP-Dateien zu testen können Sie SANDBOX.ONLINEPHPFUNCTIONS.COM oder WRITEPHPONLINE.COM nutzen. Für komplexere Tests benötigen Sie einen Webserver auf den Sie diese Dateien hochladen und danach in Ihrem Browser abrufen und testen können! Dazu empfehle ich das Webhosting von HOSPOINT AG. Link siehe Hauptseite auf WEBALGO.CH

Alle weiteren Informationen und downloadbaren Vorlagen für die Erstellung Ihrer individuellen Website finden Sie auf WEBALGO.CH! Für weitere individuelle Beratung und Hilfe kontaktieren Sie mich über meine Website.

Markus Müller

Link zum Download der dieser Website zugrundeliegenden Dateien:

Die Datei index.php

Die Datei head-teil1.html

<head> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">  <title>WEBALGO.CH: Algorithmen für das WEB</title> <link rel="stylesheet" href="stylesheet.css"> <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5fa529a47efc200012ec7062&product=sop' async='async'></script> <script data-ad-client="ca-pub-3255978515549111" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Die Datei head-teil2.html: Wird in Unterseiten weggelassen resp. nicht includiert damit diese Angaben nicht doppelt vorhanden sind. Wirkt sich auf Ranking in Suchmaschinen aus!

Die Datei head-teil3.html

Die Datei stylesheet.css

@media all and (min-width: 960px) and (max-width: 2024px) { sr.schrift1 {font-family: arial; color: #000000; font-size: 15px} sr.schrift2 {font-family: arial; color: #000066; font-size: 15px} p { font-family: Arial; font-size: 1.0em; color: black } p1 { font-family: Arial; font-size: 1.1em; color: black } } @media all and (min-width: 321px) and (max-width: 480px) { sr.schrift1 {font-family: arial; color: #000000; font-size: 20px} sr.schrift2 {font-family: arial; color: #000066; font-size: 20px} p { font-family: Arial; font-size: 1.0em; color: black } p1 { font-family: Arial; font-size: 2em; color: black } p.a { font-family: Arial; font-size: 2em; color: black } } a:link { text-decoration: none; text-underline: none; color: #610B38; } a:visited { text-decoration: none; text-underline: none; color: #610B38; } a:active { text-decoration: none; text-underline: none; color: #610B38; } a:hover { text-decoration: none; text-underline: none; color: #610B38; } background-repeat: no-repeat;

Die Datei kopf.php

<html> <head> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <div align="center"> <table border="0"> <tr> <td> <img src="ph.png" height="100" width="20"> </td> <td><sr class="schrift1">Dies ist die Vorlagewebsite<br><a href="SIMPLEWEB.zip">Download der dieser Website zugrundeliegenden Dateien</a></sr><br><br> <?php include 'dropdown.php';?> </td> <td> <img src="ph.png" height="100" width="20"> </td> </tr> </table> </div> </body> </html>

Die Datei dropdown.php mit Weiche Auswahl Menue für Desktop und Mobile

<?php $useragent=$_SERVER['HTTP_USER_AGENT']; if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) { include('dropdown-mobile.html'); } else { include('dropdown-desktop.html'); } ?>

Die Datei dropdown-mobile.html

<html> <head></head> <body style="font-family:'Arial'"> <img src="ph.png" height="50" width="20"><br> <table border="0"> <tr> <td align="left">  <style> /* Style The Dropdown Button */ .dropbtn { background-color: white; color: black; padding: 5px; font-size: 50px; border: none; cursor: pointer; } /* The container <div> - needed to position the dropdown content */ .dropdown { font-size: 40px; position: left; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { font-size: 50px; display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { font-size: 50px; color: black; padding: 15px 7px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: white} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: white; } </style> <div class="dropdown" text-align: left;> <button class="dropbtn"><b>NAVIGATION</b></button> <div class="dropdown-content" font-size: 40px;> <a href="a.php">A</a> <a href="b.php">B</a> <a href="c.php">C</a> <a href="d.php">D</a> <a href="e.php">E</a> <a href="f.php">F</a> <a href="g.php">G</a> <a href="index.php">Home</a> </div> </div> </td> </tr> </table> <br> <img src="ph.png" height="50" width="20"> </body>

Die Datei dropdown-desktop.html

<html> <head></head> <body style="font-family:'Arial'"> <table border="0"> <tr> <td align="left">  <style> /* Style The Dropdown Button */ .dropbtn { background-color: white; color: black; padding: 5px; font-size: 15px; border: none; cursor: pointer; } /* The container <div> - needed to position the dropdown content */ .dropdown { position: left; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: white; min-width: 160px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 5px 7px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: white} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: white; } </style> <div class="dropdown" text-align: left;> <button class="dropbtn"><b>NAVIGATION</b></button> <div class="dropdown-content"> <a href="a.php">A</a> <a href="b.php">B</a> <a href="c.php">C</a> <a href="d.php">D</a> <a href="e.php">E</a> <a href="f.php">F</a> <a href="g.php">G</a> <a href="index.php">Home</a> </div> </div> </td> </tr> </table> </body>

Die Datei hauptteil.php

<html> <head> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <table border="0" width="100%"> <tr> <td> <img src="ph.png" height="10" width="100"> </td> <td> <sr class="schrift1">Hier folgt der Inhalt der Hauptseite. Die Schriftart und -Farbe ist durch die zentrale Datei stylesheet.css gesteuert: <xmp><sr class="schrift1">Text</sr></xmp><br>Die Abstände an den Rändern links und rechts werden durch <xmp><img src="ph.png" height="10" width="200"></xmp> definiert.<br><br> <table border="0" width=800> <tr> <td align="justify"><sr class="schrift2"> Lernen durch Üben: Studieren Sie den Aufbau der einzelnen Dateien und üben Sie indem Sie die Dateien herunterladen, nach Ihren Wünschen bearbeiten/verändern und auf Ihren Server hochladen (.php-Dateien können nur auf einem Server getestet werden) und in Ihrem Browser testen!<br><br>Wenn Sie eine neue Unterseite erstellen kopieren Sie die Datei index.php und nennen Sie die neue Datei z.B. unterseite1.php. Den neuen Inhalt erstellen Sie in einer Seite mit dem Namen inhalt1.php. In der Datei unterseite1.php ändern Sie php include 'hauptteil.php' zu php include 'inhalt1.php' usf. So müssen Sie wenn Sie z.B. das Menue ändern nur 1 Datei ändern da diese Datei auf jeder Unterseite jeweils dynamisch eingefügt wird. <br><br> Um zu beginnen erstellen Sie Ihre eigene Datei hauptteil.php in ihrem Texteditor z.B. von Windows und fügen nachfolgendes ein:<br><br> <?php show_source("htmlgrundgeruest.html"); ?> <br><br> Download Datei <a href="downloadhtmlgrundgeruest.php">htmlgrundgeruest.html</a> beinhaltend obigen HTML-Code. Nach download in index.html oder index.php umbenennen! Hauptseiten einer Website lauten immer index. <br><br>Um PHP-Dateien zu testen können Sie <a href="https://sandbox.onlinephpfunctions.com/" target="_blank">SANDBOX.ONLINEPHPFUNCTIONS.COM</a> oder <a href="writephponline.com" target="_blank">WRITEPHPONLINE.COM</a> nutzen. Für komplexere Tests benötigen Sie einen Webserver auf den Sie diese Dateien hochladen und danach in Ihrem Browser abrufen und testen können! Dazu empfehle ich das Webhosting von <b>HOSPOINT AG</b>. Link siehe Hauptseite auf <a href="https://webalgo.ch">WEBALGO.CH</a> <br><br> Alle weiteren Informationen und downloadbaren Vorlagen für die Erstellung Ihrer individuellen Website finden Sie auf <a href="https://webalgo.ch">WEBALGO.CH</a>! Für weitere individuelle Beratung und Hilfe <a href="https://webalgo.ch/kontakt.php" target="_blank"><b>kontaktieren</b></a> Sie mich über meine Website.<br><br>Markus Müller </sr></td> </tr> </table> <br><br><a href="SIMPLEWEB.zip">Link zum Download der dieser Website zugrundeliegenden Dateien:</a> </sr> </td> <td> <img src="ph.png" height="10" width="100"> </td> </tr> <tr> <td></td> <td><sr class="schrift1"><img src="ph.png" height="100" width="10"></sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei index.php</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("index-test.php"); ?> </sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"><img src="ph.png" height="100" width="10"></sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei head-teil1.html</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("head-teil1.html"); ?> </sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"><img src="ph.png" height="100" width="10"></sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei head-teil2.html: Wird in Unterseiten weggelassen resp. nicht includiert damit diese Angaben nicht doppelt vorhanden sind. Wirkt sich auf Ranking in Suchmaschinen aus!</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("head-teil2.html"); ?> </sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"><img src="ph.png" height="100" width="10"></sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei head-teil3.html</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("head-teil3.html"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei stylesheet.css</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("stylesheet.css"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> <img src="ph.png" height="10" width="300"> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei kopf.php</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("kopf.php"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> <img src="ph.png" height="10" width="300"> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei dropdown.php mit Weiche Auswahl Menue für Desktop und Mobile</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("dropdown.php"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> <img src="ph.png" height="10" width="300"> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei dropdown-mobile.html</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("dropdown-mobile.html"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> <img src="ph.png" height="10" width="300"> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei dropdown-desktop.html</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("dropdown-desktop.html"); ?> </sr></td> <td></td> </tr> <tr> <td> <img src="ph.png" height="20" width="20"> </td> <td> <sr class="schrift1"></sr> </td> <td> <img src="ph.png" height="10" width="300"> </td> </tr> <tr> <td></td> <td><sr class="schrift1">Die Datei hauptteil.php</sr></td> <td></td> </tr> <tr> <td></td> <td><sr class="schrift1"> <?php show_source("hauptteil.php"); ?> </sr></td> <td></td> </tr> </table> </body> </html>