HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!DOCTYPE html>
<html lang="de">
<head>
<title>
Glossar
</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="author" content="Reaper911211">
<meta name="description" content="Grundgerüst einer HTML-SEITE">
<meta name="keywords" content="HTML, Grundgerüst, Aufbau">
<link rel="stylesheet" type="Text/css" href="test.css">
<style type="text/css">
a:link {color: #06c;}
a:visited {color: #f0f;}
a:hover {color: #0cf;}
a:active {color: #f00;}
h1 {
background-color: black;
color: blue;
}
h1 { text-align: center }
</style>
</head>
<Body id="Top">
<h1>
Glossar
</h1>
<h2> Navigationsleiste </h2>
<a href="#a" title="zum Seitenanfang">A</a>
<a href="#b" title="zum Seitenanfang">B</a>
<a href="#c" title="zum Seitenanfang">C</a>
<a href="#d" title="zum Seitenanfang">D</a>
<a href="#e" title="zum Seitenanfang">E</a>
<a href="#f" title="zum Seitenanfang">F</a>
<a href="#g" title="zum Seitenanfang">G</a>
<a href="#h" title="zum Seitenanfang">H</a>
<a href="#i" title="zum Seitenanfang">I</a>
<a href="#j" title="zum Seitenanfang">J</a>
<a href="#k" title="zum Seitenanfang">K</a>
<a href="#l" title="zum Seitenanfang">L</a>
<a href="#m" title="zum Seitenanfang">M</a>
<a href="#n" title="zum Seitenanfang">N</a>
<a href="#o" title="zum Seitenanfang">O</a>
<a href="#p" title="zum Seitenanfang">P</a>
<a href="#q" title="zum Seitenanfang">Q</a>
<a href="#r" title="zum Seitenanfang">R</a>
<a href="#s" title="zum Seitenanfang">S</a>
<a href="#t" title="zum Seitenanfang">T</a>
<a href="#u" title="zum Seitenanfang">U</a>
<a href="#v" title="zum Seitenanfang">V</a>
<a href="#w" title="zum Seitenanfang">W</a>
<a href="#x" title="zum Seitenanfang">X</a>
<a href="#y" title="zum Seitenanfang">Y</a>
<a href="#z" title="zum Seitenanfang">Z</a>
<d>
</d>
<dl>
<dt id="a">
ActionScript
</dt>
<dd>
ActionScript (kurz AS) ist eine Programmiersprache des US-amerikanischen Softwareunternehmens Adobe Inc. auf Basis des ECMAScript-Standards (ECMA-262) für Programme, die für Adobe Flash, Flex oder Air entwickelt werden.
</dd>
<dt>
ADA
</dt>
<dd>
Programmiersprache militärischen Ursprungs. Benannt nach Augusta Ada Byron, der ersten "Programmiererin" (um 1850).
</dd>
<dt>
Assembler
</dt>
<dd>
Maschinenspezifische / computerabhängige Programmiersprache, die dem direkten Befehlssatz eines Prozessors sehr nahe kommt.
Assembler ist die Programmiersprache, die zu der schnellsten Rechenzeit des auszuführenden Programms führt.
Sie wird daher für viele Hochleistungsprogramme benutzt.
</dd>
<dt class="Alpha" id="b">
BASIC
</dt>
<dd>
Abkürzung für "Beginners All purpose Symbolic Instruction Code" - Leicht erlernbare Programmiersprache, die im Hobby- und Mikrocomputerbereich verwendet wird;
aufgrund mangelhafter Strukturierungsmöglichkeiten ist "nacktes" BASIC für kommerzielle Anwendungen kaum zu empfehlen.
Neuere Versionen realisieren aber das Klassenkonzept der objektorientierten Programmierung.
</dd>
<dt>
Brainfuck
</dt>
<dd>
Brainfuck (dt: „Hirnfick“) ist eine esoterische Programmiersprache, die der Schweizer Urban Müller im Jahre 1993 entwarf.
Brainfuck ist für den produktiven Einsatz viel zu umständlich und zu ineffizient, aber geeignet, um die Methodik von Softwareentwicklung zu schulen.
</dd>
<dt class="Alpha" id="c">
C
</dt>
<dd>
Höhere Programmiersprache, die mit einem geringen Befehlssatz auskommt und teilweise sehr hardwarenah ist.
Ein Großteil des Betriebssystems UNIX ist in dieser Sprache geschrieben. C kann sowohl auf Großrechnern als auch auf PCs verwendet werden.
</dd>
<dt>C++
</dt>
<dd>
Objektorientierte Weiterentwicklung der Programmiersprache C.
</dd>
<dt>
C#
</dt>
<dd>
(englisch gesprochen: "C sharp") ist eine objektorientierte Programmiersprache, die Microsoft Mitte 2000 präsentiert hat.
C# wurde aus C++ abgeleitet. Ähnlich wie Suns Java soll C# die Portierung des Programm-Codes unter verschiedenen Betriebssystemen drastisch vereinfachen.
</dd>
<dt>
CCC
</dt>
<dd>
Abkürzung für "Common Business Oriented Language" - eine höhere Programmiersprache, die für Großcomputer und Mikrocomputer eingesetzt wird.
</dd>
<dt>
CURL
</dt>
<dd>
Curl ist eine Multiparadigmen-Programmiersprache, die entwickelt wurde, um bessere Internetanwendungen schreiben zu können. Es fließen Elemente aus Markupsprache, Skript- und objektorientierter Sprache ein.
</dd>
<dt class="Alpha" id="d">
Delphi
</dt>
<dd>
Objektorientierte Programmiersprache von Borland zur Entwicklung von Desktop-, Client/Server- und Internet-Anwendungen.
</dd>
<dt class="Alpha" id="e">
ELAN
</dt>
<dd>
Abkürzung für "Educational LANguage" - eine höhere Programmiersprache.
</dd>
<dt>
Elixir
</dt>
<dd>
... ist eine funktionale, nebenläufige Allzweck-Programmiersprache, die auf der virtuellen Maschine von Erlang (BEAM) läuft.
</dd>
<dt class="Alpha" id="f">
FileMaker Script
</dt>
<dd>
FileMaker Script ist eine Skriptsprache des US-amerikanischen Unternehmens FileMaker, Inc. Sie ist ein Bestandteil des Datenbanksystems FileMaker.
</dd>
<dt>
FORTRAN
</dt>
<dd>
Abkürzung für "FORmular TRANsistor" - höhere Programmiersprache speziell für mathematisch-technische Aufgaben.
</dd>
<dt class="Alpha" id="g">
Gambas
</dt>
<dd>
Gambas, ein rekursives Akronym für Gambas almost means basic, ist eine freie Programmiersprache zur Softwareentwicklung.
</dd>
<dt>
Generative Modelling Language
</dt>
<dd>
Die Generative Modelling Language (GML) ist eine Programmiersprache zur Beschreibung dreidimensionaler Formen.
</dd>
<dt class="Alpha" id="h">
Haskell
</dt>
<dd>
Haskell ist eine rein funktionale Programmiersprache, benannt nach dem US-amerikanischen Mathematiker Haskell Brooks Curry, dessen Arbeiten zur mathematischen Logik eine Grundlage funktionaler Programmiersprachen bilden.
</dd>
<dt>
HPPCL
</dt>
<dd>
Abkürzung für "Hewlett Packard Printer Control Language"
(Druckerbefehlssprache) - von Hewlett-Packard entwickelte Befehlssprache zum Steuern von "HP-kompatiblen" (Laser-) Druckern.
</dd>
<dt>
Hyper Talk
</dt>
<dd>
Objektorientierte Programmiersprache auf Apple-Computern.
</dd>
<dt class="Alpha" id="i">
Inform
</dt>
<dd>
Inform ist eine von Graham Nelson seit 1993 entwickelte objektorientierte Programmiersprache, in der Textadventures programmiert werden können.
</dd>
<dt class="Alpha" id="j">
Java
</dt>
<dd>
... ist eine objektorientierte Programmiersprache und eine eingetragene Marke des Unternehmens Sun Microsystems, welches 2010 von Oracle aufgekauft wurde.
</dd>
<dt>
Javascript
</dt>
<dd>
JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde,
um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.
</dd>
<dt class="Alpha" id="k">
KriXstart
</dt>
<dd>
... ist eine Skriptsprache für Microsoft Windows Betriebssysteme. Sie wird von Ruud van Velsen von Microsoft in den Niederlanden entwickelt.
</dd>
<dt>
Kotlin
</dt>
<dd>
... ist eine plattformübergreifende, statisch typisierte Programmiersprache, die in Bytecode für die Java Virtual Machine (JVM) übersetzt wird,
aber auch in JavaScript-Quellcode oder (mittels LLVM) in Maschinencode umgewandelt werden kann.
</dd>
<dt class="Alpha" id="l">
LISP
</dt>
<dd>
Abkürzung für "List Processing Language" - symbolische Programmiersprache aus den 50er Jahren, um künstliche Intelligenz zu erzeugen.
</dd>
<dt>
Logo
</dt>
<dd>
Höhere Programmiersprache, die in den 60er Jahren in den USA entwickelt wurde, um das Programmieren so zu vereinfachen, dass es auch von Jugendlichen erlernt werden kann.
</dd>
<dt class="Alpha" id="m">
Macroassembler
</dt>
<dd>
Programmiersprache, die der Maschinensprache sehr nah ist, aber schon mit Symbolen arbeitet.
</dd>
<dt class="Alpha" id="n">
Natural
</dt>
<dd>
Natural – auch im deutschen Sprachraum meist englisch ausgesprochen – ist eine Familie von Softwareentwicklungsumgebungen der Software AG für die Erstellung von Anwendungsprogrammen.
</dd>
<dt class="Alpha" id="o">
Oberon
</dt>
<dd>
Oberon ist eine von Niklaus Wirth und Jürg Gutknecht entwickelte, objektorientierte, streng strukturierte Programmiersprache.
</dd>
<dt>
OPAL
</dt>
<dd>
OPAL (Optimized Applicative Language) ist eine funktionale Programmiersprache, die 1986 an der TU Berlin unter der Leitung von Peter Pepper entwickelt wurde.
</dd>
<dt class="Alpha" id="p">
Pascal
</dt>
<dd>
Von Nikolaus Wirth entwickelte und nach dem Mathematiker Blaise Pascal (1623 - 1662) benannte höhere Programmiersprache.
Pascal ist eine strukturierbare und deshalb leicht zu erlernende Programmiersprache.
</dd>
<dt>
Perl
</dt>
<dd>
Interpreter-Skript-Sprache, die häufig zur Programmierung von CGI-Anwendungen benutzt wird (nicht zu verwechseln mit Pearl).
</dd>
<dt>
PHP
</dt>
<dd>
PHP (rekursives Akronym und Backronym für „PHP: Hypertext Preprocessor“, ursprünglich „Personal Home Page Tools“)
ist eine Skriptsprache mit einer an C und Perl angelehnten Syntax, die hauptsächlich zur Erstellung dynamischer Webseiten oder Webanwendungen verwendet wird.
</dd>
<dt>
PL/SQL
</dt>
<dd>
Abkürzung für "Procedural Language/Structured Query Language" - PL/SQL ist eine von Oracle entwickelte SQL-Erweiterung und dient der Entwicklung von Client-Server-Anwendungen.
</dd>
<dt>
Prolog
</dt>
<dd>
Abkürzung für "Programming in Logic" - in Frankreich entwickelte Programmiersprache mit dem Ziel der Entwicklung Künstlicher Intelligenz.
</dd>
<dt>
Python
</dt>
<dd>
... ist eine Skriptsprache, welche die besten Konzepte aus C++, Pascal und Modula-3 unter eine Hut zu bringen versucht.
Übrigens: Der Name Python geht nicht auf die gleichnamige Schlangenart zurück, sondern auf die britische Schauspielertruppe Monty Python!.
Der Autor von Python ist Guido van Rossum.
</dd>
<dt class="Alpha" id="q">
QuakeC
</dt>
<dd>
... ist eine 1996 von John Carmack von id Software entwickelte Skriptsprache.
</dd>
<dt class="Alpha" id="r">
Ruby
</dt>
<dd>
Ruby (englisch für Rubin) ist eine höhere Programmiersprache, die Mitte der 1990er Jahre vom Japaner Yukihiro Matsumoto entworfen wurde.
</dd>
<dt class="Alpha" id="s">
SMALLTALK
</dt>
<dd>
Multitaskingfähiges und objektorientiertes Betriebssystem und Programmiersprache.
</dd>
<dt>
Squirrel
</dt>
<dd>
...ist eine dynamisch typisierte, objektorientierte Programmiersprache.
</dd>
<dt class="Alpha" id="t">
Tcl
</dt>
<dd>
Tcl (Aussprache englisch tickle oder auch als Abkürzung für Tool command language) ist eine Open-Source-Skriptsprache.
</dd>
<dt class="Alpha" id="u">
UML
</dt>
<dd>
Abkürzung für "Unified Modeling Language" - UML ist eine visuelle Modellierungssprache.
Sie gibt die Notation für Diagramme zur Modellierung an. Richtig "schön" wird UML mit geeigneten Tools.
Diese helfen bei der Erstellung der Diagramme, halten sie jederzeit konsistent, generieren die Projektdokumentation und am Ende den Programmcode.
</dd>
<dt class="Alpha" id="v">
Visual Basic
</dt>
<dd>
... ist eine objektbasierte Programmiersprache, die speziell für Windows entwickelt wurde.
</dd>
<dt class="Alpha" id="w">
Web Language
</dt>
<dd>
Die Web Language von Hewlett-Packard (ursprünglich WebL genannt und wegen einer Warenzeichen-Problematik umbenannt) ist eine Skriptsprache für Auswertungs- und Automatisierungsprobleme im World Wide Web.
</dd>
<dt class="Alpha" id="x">
Xojo
</dt>
<dd>
Xojo (früher REALbasic und Real Studio) ist eine objektbasierte Programmiersprache mit Visuellen Entwicklungsumgebungen für macOS, Linux und Windows und basiert in ihren Befehlen und der Syntax auf der Programmiersprache BASIC.
</dd>
</de>
</body><br><br><br>
<a href="#top" title="zum Seitenanfang">zum Seitenanfang
</a>
<br>
<a href="index.html" title="zur Startseite">zum Index
</a>
body { color:#ebebeb;
font-family:verdana,serif;
font-family:verdana,serif;
background-color:#21222b;
}
/* Dunkleres Grün #23d42f , Alte Farbe #e527d4 h1 #e53127 h2 #1114e7 */
h1
{color:#020dd6;
font-size:150%;
}
h2
{color:#1114e7;
font-size:130%}
p
{color:#ebebeb;}
th
{color:#ebebeb;}
tp
{color:#ebebeb;}
tr
{color:#ebebeb;}
td
{color:#ebebeb;}
ul {list-style-type:none;}
a {text-decoration:none;}
#Alphabet :target{
color:green;
}
top {
position: fixed;
bottom: 0;
right: 0;
}
Also see: Tab Triggers