Kleiner JavaScript Kurs
HTML / CSS / JavaScript Editor
Version 2.2 (05.09.2024) Falls diese neue Version nicht richtig funktioniert, gehts hier zum alten HTML/CSS/JavaScript Editor
Datei
Link einfügen für:
|
|
Externe css Dateien können in die HTML Seite mit <link href="Dateiname.css" rel="stylesheet"> eingebunden werden z.B. <link href="test.css" rel="stylesheet">
Datei
Datei
Datei
Achtung: damit alles funktioniert, muss in Firefox der "Schutz vor Aktivitätsverfolgung" deaktiviert werden.
#ff0000
- Keine eigenen Bilder
Die Fotos liegen im Ordner "images". Sie können z.B. so verwendet werden:
Schnick, Schnack, Schnuck Bilder von
Von Sertion, CC BY-SA 3.0, Link
<img src="images/beetle.gif">
Von Sertion, CC BY-SA 3.0, Link
Die JavaScript Bibliotheken liegen im Ordner "js". Sie können z.B. so verwendet werden:
<script src="js/jquery.js"></script>
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
</head>
<body>
<button>fade Beispiel 1</button>
<button>fade Beispiel 2</button>
<p>Dieser Absatz wird langsam, linear ein-/ausgeblendet.</p>
<p>Dieser Absatz hat eine schnelle Animation.</p>
<div id="log"></div>
<script>
$( "button" ).first().click(function() {
$( "p" ).first().fadeToggle( "slow", "linear" );
});
$( "button" ).last().click(function() {
$( "p" ).last().fadeToggle( "fast", function() {
$( "#log" ).append( "<div>erledigt</div>" );
});
});
</script>
</body>
<head>
<meta charset="utf-8">
<!-- Bootstrap Haupt-CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-warning btn-lg active" role="button" aria-pressed="true">Link</a>
<!-- Bootstrap Haupt-JavaScript -->
<script src="js/bootstrap.js"></script>
</body>