HTML
Das Skelett
Das Grundgerüst einer Webseite ist das Hyper-Text-Markup-Language (HTML). Es handelt sich also um eine "Text-Auszeichnungs-Sprache", nicht um eine Programmiersprache. Das HTML beherbergt die Inhalte der Seite und reicht damit schon aus, diese im Browser des Besuchers darzustellen. Die Formatierung, die Interpretation von Bild und Text, übernimmt der Browser. Von Gestaltung kann hier allerdings noch nicht wirklich die Rede sein.
farbmuster.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Farbmuster</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="farbmuster.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<style type="text/css">
</style>
<body>
<h1>Selbstgebaut</h1>
<p class="paragraf-class" id="paragraf-id">Bitte den Button "Show" klicken um ein Bild zu erzeugen.<br/>Gleichzeitig wird ein zweiter Button erstellt.<br/>Wenn Sie diesen klicken, beginnt die Animation.<br/>Danach fahren Sie mit der Maus über das Bild und die Animation ist vollendet.</p>
<button id="button-insert" class="show-class" onclick="afterText()">Show</button>
<article id="" class="">
<h3 class="" id="">Globale Variablen</h3>
<div class="farbmuster" id="">
<h3 class="" id="">Farben</h3>
<p class="" id=""><span class="schluesseltitel">Schlüssel:</span>
<span class="werttitel">Wert:</span><span class="mustertitel">Muster</span></p>
<!-- Background grau - background-color: #ccc; -->
<p class="" id=""><span class="schluessel">$col01</span>
<span class="wert">#cccccc</span><span class="muster" id="cccc"></span></p>
<!-- Background weiß - background-color: #fff; -->
<p class="" id=""><span class="schluessel">$col02</span>
<span class="wert">#ffffff</span><span class="muster" id="cfff"></span></p>
<!-- Background schwarz - background-color: #000; -->
<p class="" id=""><span class="schluessel">$col03</span>
<span class="wert">#000000</span><span class="muster" id="c000"></span></p>
<!-- Schatten - box-shadow: 6px 6px 12px 6px #7A7A7A; -->
<p class="" id=""><span class="schluessel">$col04</span>
<span class="wert">#7A7A7A</span><span class="muster" id="c7A7A7A"></span></p>
<!-- Background blau - Schriftfarbe headline: #3BEFEB; -->
<p class="" id=""><span class="schluessel">$col05</span>
<span class="wert">#3BEFEB</span><span class="muster" id="c3BEFEB"></span></p>
<!-- Background grau - text-shadow: 3px 3px 6px #45484F; -->
<p class="" id=""><span class="schluessel">$col06</span>
<span class="wert">#45484F</span><span class="muster" id="c45484F"></span></p>
<!-- Background grau - Schriftfarbe: #444; -->
<p class="" id=""><span class="schluessel">$col07</span>
<span class="wert">#444444</span><span class="muster" id="c444444"></span></p>
<!-- Background mittelblau - background-color: #444b7f; -->
<p class="" id=""><span class="schluessel">$col08</span>
<span class="wert">#444b7f</span><span class="muster" id="c444b7f"></span></p>
<!-- Background grau - background-color: #666; -->
<p class="" id=""><span class="schluessel">$col09</span>
<span class="wert">#666666</span><span class="muster" id="c666"></span></p>
<!-- Background mittelgrau mittel - background-color: #8e8e8e; -->
<p class="" id=""><span class="schluessel">$col10</span>
<span class="wert">#8e8e8e</span><span class="muster" id="c8e8e8e"></span></p>
<!-- Background mittelgrau - background-color: #d9d9d9; -->
<p class="" id=""><span class="schluessel">$col11</span>
<span class="wert">#d9d9d9</span><span class="muster" id="cd9d9d9"></span></p>
<!-- Background hellgrau mittel - background-color: #ececec; -->
<p class="" id=""><span class="schluessel">$col12</span>
<span class="wert">#ececec</span><span class="muster" id="cececec"></span></p>
<!-- Background hellgrau - background-color: #bbbbbb; -->
<p class="" id=""><span class="schluessel">$col13</span>
<span class="wert">#bbbbbb</span><span class="muster" id="cececec"></span></p>
<!-- Text violet - text side_navigation li a: #AB00FF; -->
<p class="" id=""><span class="schluessel">$col14</span>
<span class="wert">#AB00FF</span><span class="muster" id="cAB00FF"></span></p>
<!-- Background hellgrau - background-color_navigation: #f1f1f1; -->
<p class="" id=""><span class="schluessel">$col15</span>
<span class="wert">#f1f1f1</span><span class="muster" id="cf1f1f1"></span></p>
<!-- Rahmen violet dunkel - rahmen-color_navigation: #5C009F; -->
<p class="" id=""><span class="schluessel">$col16</span>
<span class="wert">#5C009F</span><span class="muster" id="c5C009F"></span></p>
<!-- Background hellgrau - background-color_navigation hover: #FF00DC; -->
<p class="" id=""><span class="schluessel">$col17</span>
<span class="wert">#FF00DC</span><span class="muster" id="cFF00DC"></span></p>
<!-- Background hellblau - background-color_haupt-navigation: #68f8ec; -->
<p class="" id=""><span class="schluessel">$col18</span>
<span class="wert">#68f8ec</span><span class="muster" id="c68f8ec"></span></p>
<!-- Background hellblaugrau - background-color_haupt-navigation: #c5d3f7; -->
<p class="" id=""><span class="schluessel">$col19</span>
<span class="wert">#c5d3f7</span><span class="muster" id="cc5d3f7"></span></p>
<!-- Text hellblau - aktiv_haupt-navigation: #BFFAFF; -->
<p class="" id=""><span class="schluessel">$col20</span>
<span class="wert">#BFFAFF</span><span class="muster" id="cBFFAFF"></span></p>
<!-- Text hellblau - aktiv_haupt-navigation: #BFFAFF; -->
<p class="" id=""><span class="schluessel">$col21</span>
<span class="wert">#2F3BBF</span><span class="muster" id="c2F3BBF"></span></p>
</div>
<div class="" id=""><p class="foot-p">Made by <a href="http://www.dobrunz.com" target="blank">atelje dobrunz</a> © Klaus Dobrunz</p></div>
</article>
<script type="text/javascript" src="farbmuster.js"></script>
</body>
</html>
farbmuster.html
Kopieren Sie das oben abgebildete HTML und fügen Sie es in einen Texteditor ein. Nennen Sie die Datei "farmmuster.html" - (Ohne Anführungsstriche). Speichern Sie diese in einem leeren Ordner und nennen diesen "Farbmuster" oder "Mein erstes HTML". Danach rufen Sie die Datei in einem Webbrowser (z.B. FireFox, Chrom usw.) auf. Sie können die Datei auch per "Drag and Drop" in die Adressleiste des Browsers ziehen. Schon haben Sie ein erstes Ergebnis.
Eine Gestaltung der Elemente erhalten Sie, wenn Sie auf der Seite "CSS" die weiteren Schritte befolgen.