HTML

Wilhelm's HTML, CSS, JavaScript, and jQuery Templates:

Code Snippets:
Zufallszahl/Random Number;
No Cursor;
Moving Textbox;
Rotate Picture;
Finite-State Machine Using Interval;
OOP (coming soon);

Example 1 (html):

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>***TITEL***</title>
        
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <link rel="stylesheet" href="xyz.css" media="all">
        <script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
    </head>

    <body style="background-color:green">
        <h1>***Eine Ueberschrift***</h1>
    </body>

</html>

Example 1 (JavaScript - nicht anonym):

function func01() {
    window.alert("Hi, Wilhelm!");
    console.log("Hi, Wilhelm :-)");
}

function loadMyStartFunction() {
    func01();
}

window.addEventListener("load", loadMyStartFunction);

***********************************************

Example 2 (html):

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>***TITEL***</title>
        
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <link rel="stylesheet" href="xyz.css" media="all">
        <script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
    </head>

    <body style="padding:0; margin:0; border-style:none;">
        <h1>***Eine Ueberschrift***</h1>
    </body>

</html>

Example 2 (JavaScript - anonym): !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

(function () {
    // GLOBAL VARIABLES (Scope in JavaScript is function/object based):
    // ===================================================
    var iBodyWidth = 0;
    var iBodyHeight = 0;
    var iMaxBodyX = 0;
    var iMaxBodyY = 0;

    // SVG "ROOT" Definieren:
    var defs = 'http://www.w3.org/2000/svg';
    var SVG_ROOT;

     function fStartApplication() {
        console.log("Start: fStartApplication");

        // ......................your program....................................
        // ......................your program....................................

    }

    function fInit() {
        console.log("Start: fInit");
        iMaxBodyX = iBodyWidth = document.body.clientWidth;
        iMaxBodyY = iBodyHeight = window.innerHeight;
        console.log("iBodyWidth (iMaxBodyX) = " + iMaxBodyX + "px");
        console.log("iBodyHeight (iMaxBodyY) = " + iMaxBodyY + "px");

        // SVG in DOM einhaengen und konfigurieren:
        SVG_ROOT = document.createElementNS(defs, 'svg');
        document.body.appendChild(SVG_ROOT);
        SVG_ROOT.style.width = "100%";
        SVG_ROOT.style.height = iBodyHeight + "px";

        fStartApplication();
    }

window.addEventListener("load", fInit);

})();

***********************************************

Example 3 (andere JavaScript Start Möglichkeiten):

window.onload = function() {
    runTheExampleFunction();
}

function runTheExampleFunction() {
    alert("Running runTheExample-function");
}

Example 4 (innerHTML):

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>***TITEL***</title>
        
        <meta http-equiv="x-ua-compatible" content="IE=edge">
       <link rel="stylesheet" href="xyz.css" media="all">
       <script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
    </head>
    <body>
        <div id="idMain">
        <p id="idFirst">First paragraph</p>
        <p id="idSecond">Second paragraph</p>
        <p id="third">Third paragraph</p>
        </div>
    </body>
</html>

**********************************************************

window.onload = function() {
runAllMyFunctions();
}

function runAllMyFunctions() {
document.getElementById("idSecond").innerHTML = "Wilhelm";
}

Example 5 (starten mit jQuery):

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>***TITEL***</title>
        
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <link rel="stylesheet" href="xyz.css" media="all">
        <script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
    </head>
    <body>
    </body>
</html>

*********************************************

jQuery(document).ready(function() {
    // Some Start Up Functions Are Called Here:
    Function1();
});

$(document).ready(function() {
    // Some Start Up Functions Are Called Here:
    Function2();
});

$(function() {
    // Some Start Up Functions Are Called Here:
    Function3();
});

function Function1() {
    alert("Function1");
}

function Function2() {
    alert("Function2");
}

function Function3() {
    alert("Function3");
}

Example 6 (jQuery statt innerHTML):

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>***TITEL***</title>
        
        <meta http-equiv="x-ua-compatible" content="IE=edge">
        <link rel="stylesheet" href="xyz.css" media="all">
        <script type="text/javascript" src=".\\JavaScript\\XYZ.js"></script>
    </head>
    <body>
        <h1 id="idTitle">Life</h1>

        <p id="idFirst">
        Now is the time for all good men to come to the aid of their country.
        </p>

        <p id="idSecond">
        <strong>In the end these things matter most:
        How well did you love? How fully did you live?</strong>
        </p>

    </body>
</html>

********************************************************

$(function () {

jQuery("#idTitle").fadeOut(500).fadeIn(500);
$("#idFirst").fadeOut(1000).fadeIn(1000);
$("#idSecond").text("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");

});

********************************************************

// Return Random Number:
function fReturnRandomNumber() {
    var min = 0;
    var max = 4; // Ergebins: 0,1,2,3
    return ZufallsZahl = Math.floor(Math.random() * (max - min)) + min;
}

********************************************************
// keyboard events:

function fKeyboardEvent(event) {
    console.log("KeyCode = " + event.keyCode);

    // Arrow Up = 38
    // Arrow Down = 40
    // Arrow Left = 37
    // Arrow Right = 39

    if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 37 || event.keyCode == 39) {
        // Wilhelm's Code ..................................
        // Wilhelm's Code ..................................
    {
}

function fAdd_Event_Listener_for_Keyboard_Keys_when_DOM_or_Whatever_Finished() {
    window.addEventListener("keydown", fKeyboardEvent);
    console.log("keydown Event added.");
}

********************************************************

OOP:

https://developer.mozilla.org/de/docs/Web/JavaScript
https://developer.mozilla.org/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript (OOP JavaScript)

http://eloquentjavascript.net/1st_edition/chapter8.html
http://code.tutsplus.com/tutorials/the-basics-of-object-oriented-javascript--net-7670

********************************************************

PHP

:-)