Moderne Web-Technologien für moderne Websites! In diesem Standardwerk gibt Ihnen Jürgen Wolf alle Werkzeuge an die Hand, die sie für einen starken Auftritt im Web benötigen. Lernen Sie alle Grundlagen von HTML, CSS und JavaScript kennen und erweitern Sie Ihr Wissen mit diesem umfassenden Lern- und Nachschlagewerk: vom Aufbau eines HTML-Dokuments über die Gestaltung mit CSS bis hin zur Web-Programmierung mit JavaScript. Inkl. einer Einführung in die wichtigen JavaScript-Frameworks React und Angular.
Aus dem Inhalt:
- Syntax und Aufbau von HTML-Dokumenten
- Tabellen und Hyperlinks
- Bilder, Videos und Audio
- HTML-Formulare und interaktive Elemente
- Die Selektoren von CSS
- Vererbung und Kaskade
- Flexboxen und Grid Layouts
- Responsive Layouts erstellen
- Einführung in die JavaScript-APIs
- Einführung in React und Angular
Inhalt:
Materialien zum Buch ... 29
Vorwort ... 31
1. Einführung in das HTML-Universum ... 37
1.1 ... Ist dieses Buch überhaupt etwas für mich? ... 37
1.2 ... Die verschiedenen Typen von Websites ... 38
1.3 ... Dynamische und statische Websites ... 42
1.4 ... Sprachen für die Gestaltung und Entwicklung im Web ... 46
1.5 ... Was brauche ich, um hier anzufangen? ... 50
1.6 ... Verwendete Konventionen im Buch ... 59
1.7 ... Zusammenfassung ... 59
2. Grundlegender Aufbau von HTML(-Dokumenten) ... 61
2.1 ... Syntax und Aufbau von HTML(-Dokumenten) ... 61
2.2 ... Ein einfaches HTML-Dokument-Grundgerüst ... 72
2.3 ... Zusammenfassung ... 75
3. Die Kopfdaten eines HTML-Dokuments ... 77
3.1 ... Die HTML-Elemente für den Kopf in der Übersicht ... 77
3.2 ...
><br> 3.3 ... Exkurs: Namenskonvention und Referenzierung ... 80<br/><br> 3.4 ... Die Basis-URL einer Webseite mit <br> 3.5 ... Beziehung zu einem externen Dokument mit <br> 3.6 ... Dokumentglobale CSS-Stile mit <br> 3.7 ... Skripte in Webseiten einbinden mit <br> 3.8 ... Metainformationen für das Dokument mit <br> 3.9 ... Zusammenfassung ... 103<br/><br><br/><br><strong> 4. Der sichtbare Bereich eines HTML-Dokuments ... 105</strong><br/><br><br/> 4.1 ... HTML-Elemente für Seitenstrukturierung ... 106<br/><br> 4.2 ... HTML-Elemente für Textstrukturierung ... 117<br/><br> 4.3 ... HTML-Elemente für Textauszeichnungen ... 132<br/><br> 4.4 ... HTML und die Semantik ... 152<br/><br> 4.5 ... Barrierearmes Webdesign mit WAI-ARIA ... 154<br/><br> 4.6 ... Exkurs: Zeichencodierung ... 158<br/><br> 4.7 ... Zeichenentitäten in HTML ... 160<br/><br> 4.8 ... Zusammenfassung ... 162<br/><br><br/><br><strong> 5. Tabellen und Hyperlinks ... 163</strong><br/><br><br/> 5.1 ... Daten in einer Tabelle strukturieren ... 163<br/><br> 5.2 ... 'Elektronische' Verweise aka Hyperlinks mit <br> 5.3 ... Zusammenfassung ... 191<br/><br><br/><br><strong> 6. Grafiken und Multimedia ... 193</strong><br/><br><br/> 6.1 ... Bilder für das Web ... 194<br/><br> 6.2 ... Bilder mit <br> 6.3 ... Das passende Bild mit <br> 6.4 ... Ein Icon für die Website hinzufügen (Favicon) ... 216<br/><br> 6.5 ... Vektorgrafiken in HTML-Dokumenten verwenden ... 218<br/><br> 6.6 ... Grafiken zeichnen mit <br> 6.7 ... Videos mit dem HTML-Element <br> 6.8 ... Audiodateien mit dem HTML-Element <br> 6.9 ... Andere aktive Inhalte einbinden ... 234<br/><br> 6.10 ... Zusammenfassung ... 238<br/><br><br/><br><strong> 7. HTML-Formulare und interaktive Elemente ... 239</strong><br/><br><br/> 7.1 ... Einen Bereich für Formulare definieren ... 240<br/><br> 7.2 ... Die HTML-Eingabefelder für Formulare ... 242<br/><br> 7.3 ... Spezielle Typen von Eingabefeldern ... 250<br/><br> 7.4 ... Die HTML-Attribute für Eingabefelder ... 257<br/><br> 7.5 ... Weitere nützliche Helferlein für Eingabefelder ... 263<br/><br> 7.6 ... Formulardaten mit PHP versenden ... 267<br/><br> 7.7 ... Interaktive HTML-Elemente ... 274<br/><br> 7.8 ... Zusammenfassung ... 277<br/><br><br/><br><strong> 8. Einführung in Cascading Stylesheets (CSS) ... 279</strong><br/><br><br/> 8.1 ... Das grundlegende Anwendungsprinzip von CSS ... 280<br/><br> 8.2 ... Einbindungsmöglichkeiten von CSS in HTML ... 286<br/><br> 8.3 ... CSS im Webbrowser analysieren ... 293<br/><br> 8.4 ... Werte an CSS-Eigenschaften übergeben ... 294<br/><br> 8.5 ... Zusammenfassung ... 306<br/><br><br/><br><strong> 9. Die Selektoren von CSS ... 307</strong><br/><br><br/> 9.1 ... Die einfachen Selektoren von CSS ... 309<br/><br> 9.2 ... Kombinatoren - die Selektoren verketten ... 337<br/><br> 9.3 ... Empfehlung: So verwenden Sie effizientes und einfaches CSS ... 343<br/><br> 9.4 ... Zusammenfassung ... 346<br/><br><br/><br><strong>10. Die Vererbung und die Kaskade ... 349</strong><br/><br><br/> 10.1 ... Das Prinzip der Vererbung in CSS ... 349<br/><br> 10.2 ... Das Regelsystem der Kaskade verstehen ... 358<br/><br> 10.3 ... Zusammenfassung ... 367<br/><br><br/><br><strong>11. Das Box-Modell von CSS ... 369</strong><br/><br><br/> 11.1 ... Das klassische Box-Modell von CSS ... 370<br/><br> 11.2 ... Das alternative Box-Modell von CSS ... 382<br/><br> 11.3 ... Logische Eigenschaften ... 386<br/><br> 11.4 ... Das Box-Modell für Inline-Elemente ... 389<br/><br> 11.5 ... Boxen gestalten ... 390<br/><br> 11.6 ... Exkurs: Webbrowser-Präfixe (CSS Vendor Prefixes) ... 409<br/><br> 11.7 ... Zusammenfassung ... 411<br/><br><br/><br><strong>12. CSS-Positionierung ... 413</strong><br/><br><br/> 12.1 ... Der normale Elementfluss ... 413<br/><br> 12.2 ... Positionierung mit der CSS-Eigenschaft 'position' ... 416<br/><br> 12.3 ... Übereinanderstapeln regeln mit 'z-index' ... 428<br/><br> 12.4 ... Schwebende Boxen für die Positionierung mit 'float' ... 432<br/><br> 12.5 ... Zusammenfassung ... 447<br/><br><br/><br><strong>13. Flexboxen ... 449</strong><br/><br><br/> 13.1 ... Den Flexbox-Container erstellen ... 450<br/><br> 13.2 ... Flex-Items anpassen ... 455<br/><br> 13.3 ... Die Flex-Items im Flex-Container ausrichten ... 460<br/><br> 13.4 ... Beispiel: Navigationsbar mit Flexboxen ... 468<br/><br> 13.5 ... Zusammenfassung ... 471<br/><br><br/><br><strong>14. Responsives Webdesign und Media Queries ... 473</strong><br/><br><br/> 14.1 ... Grundlagenwissen zum responsiven Webdesign ... 473<br/><br> 14.2 ... Die Druckversion einer Website ... 492<br/><br> 14.3 ... Auf Benutzereinstellungen reagieren ... 496<br/><br> 14.4 ... Container Queries ... 507<br/><br> 14.5 ... Berechnungen mit CSS und der 'calc()'-Funktion ... 512<br/><br> 14.6 ... Zusammenfassung ... 513<br/><br><br/><br><strong>15. CSS Grid ... 515</strong><br/><br><br/> 15.1 ... Grid-Container und Rasterelemente verwenden ... 516<br/><br> 15.2 ... Responsives Grid ohne Media Queries ... 529<br/><br> 15.3 ... Ausrichten von Grid-Items ... 535<br/><br> 15.4 ... Grid-Bereiche benennen ... 539<br/><br> 15.5 ... Zusammenfassung ... 542<br/><br><br/><br><strong>16. Stylen mit CSS ... 543</strong><br/><br><br/> 16.1 ... Schriftfamilien und -formatierung mit 'font' ... 543<br/><br> 16.2 ... '@font-face', Webfonts und variable Fonts ... 559<br/><br> 16.3 ... Weiterere Anpassungsmöglichkeiten von Text ... 567<br/><br> 16.4 ... Listen mit CSS gestalten ... 576<br/><br> 16.5 ... Schönere Tabellen mit CSS gestalten ... 582<br/><br> 16.6 ... Bilder mit CSS gestalten ... 588<br/><br> 16.7 ... Elemente transformieren mit CSS ... 598<br/><br> 16.8 ... Übergänge und Animationen mit CSS erstellen ... 601<br/><br> 16.9 ... HTML-Formulare mit CSS stylen ... 605<br/><br> 16.10 ... Zusammenfassung ... 614<br/><br><br/><br><strong>17. Der CSS-Präprozessor Sass und SCSS ... 615</strong><br/><br><br/> 17.1 ... Sass oder SCSS ... 616<br/><br> 17.2 ... Von Sass/SCSS zu CSS ... 617<br/><br> 17.3 ... Einführung in Sass ... 617<br/><br> 17.4 ... Custom Properties mit reinem CSS ... 644<br/><br> 17.5 ... Verschachteltes CSS ... 651<br/><br> 17.6 ... Zusammenfassung ... 659<br/><br><br/><br><strong>18. Eine kurze Einführung in JavaScript ... 661</strong><br/><br><br/> 18.1 ... JavaScript in der Webentwicklung ... 662<br/><br> 18.2 ... JavaScript-Programme schreiben und ausführen ... 664<br/><br> 18.3 ... Ausgabe von JavaScript ... 670<br/><br> 18.4 ... Die Verwendung von Variablen in JavaScript ... 677<br/><br> 18.5 ... Übersicht über die JavaScript-Datentypen ... 681<br/><br> 18.6 ... Arithmetische Operatoren zum Rechnen in JavaScript ... 688<br/><br> 18.7 ... Bedingte Anweisungen in JavaScript ... 690<br/><br> 18.8 ... Programmanweisungen mehrmals wiederholen mit Schleifen ... 698<br/><br> 18.9 ... Zusammenfassung ... 702<br/><br><br/><br><strong>19. Arrays, Funktionen und Objekte in JavaScript ... 703</strong><br/><br><br/> 19.1 ... Funktionen in JavaScript ... 703<br/><br> 19.2 ... Arrays ... 715<br/><br> 19.3 ... Zeichenketten und reguläre Ausdrücke ... 727<br/><br> 19.4 ... Objektorientierte Programmierung in JavaScript ... 729<br/><br> 19.5 ... Weitere globale Objekte ... 736<br/><br> 19.6 ... Zusammenfassung ... 741<br/><br><br/><br><strong>20. Webseiten dynamisch ändern ... 743</strong><br/><br><br/> 20.1 ... Einführung in das DOM eines HTML-Dokuments ... 743<br/><br> 20.2 ... Das 'document'-Objekt ... 745<br/><br> 20.3 ... Die Programmierschnittstelle von DOM ... 745<br/><br> 20.4 ... Auf Elemente im DOM zugreifen ... 747<br/><br> 20.5 ... Auf JavaScript-Events reagieren ... 759<br/><br> 20.6 ... Mit dem Event-Handler die Events behandeln ... 761<br/><br> 20.7 ... Gängige JavaScript-Events in der Übersicht ... 765<br/><br> 20.8 ... Standardaktion von Events unterdrücken ... 770<br/><br> 20.9 ... Der Event-Fluss (Event-Propagation) ... 771<br/><br> 20.10 ... Weitere Informationen zu Events mit dem 'event'-Objekt ... 776<br/><br> 20.11 ... HTML-Attribut oder den Textknoten ändern ... 779<br/><br> 20.12 ... HTML-Elemente hinzufügen, ändern, entfernen ... 783<br/><br> 20.13 ... CSS und JavaScript ... 801<br/><br> 20.14 ... HTML-Formulare und JavaScript ... 804<br/><br> 20.15 ... Zusammenfassung ... 811<br/><br><br/><br><strong>21. Einführung in die Web-APIs (Browser-APIs) ... 813</strong><br/><br><br/> 21.1 ... Video- und Audio-Media-API ... 814<br/><br> 21.2 ... Den Standort ermitteln mit der Geolocation-API ... 821<br/><br> 21.3 ... Web Storage - Datenbank für Offlineanwendungen ... 833<br/><br> 21.4 ... Web Workers - die Helfer im Hintergrund ... 845<br/><br> 21.5 ... Aktualisieren ohne Anfrage mit Server-Sent Events ... 853<br/><br> 21.6 ... Weitere interessante Web-APIs im Schnelldurchlauf ... 857<br/><br> 21.7 ... Zusammenfassung ... 864<br/><br><br/><br><strong>22. Eine Einführung in Ajax und die Fetch-API ... 865</strong><br/><br><br/> 22.1 ... Eine Einführung in die Ajax-Programmierung ... 865<br/><br> 22.2 ... Die Fetch-API ... 883<br/><br> 22.3 ... Zusammenfassung ... 887<br/><br><br/><br><strong>23. Das Bootstrap-Framework einsetzen ... 889</strong><br/><br><br/> 23.1 ... Bootstrap herunterladen und integrieren ... 890<br/><br> 23.2 ... Das Layout mit dem Bootstrap-Framework erstellen ... 893<br/><br> 23.3 ... Die Komponenten des Bootstrap-Frameworks verwenden ... 905<br/><br> 23.4 ... Übersicht über weitere beliebte CSS-Frameworks ... 915<br/><br> 23.5 ... Zusammenfassung ... 916<br/><br><br/><br><strong>24. Einführung in die grundlegenden Konzepte von React ... 917</strong><br/><br><br/> 24.1 ... Was ist React? ... 917<br/><br> 24.2 ... Die Umgebung für React einrichten ... 918<br/><br> 24.3 ... Ein React-Projekt einrichten und starten ... 919<br/><br> 24.4 ... Hallo Welt in React ... 922<br/><br> 24.5 ... JSX (JavaScript XML) ... 924<br/><br> 24.6 ... Rendern von Elementen ... 932<br/><br> 24.7 ... React-Komponenten und Props ... 932<br/><br> 24.8 ... Statusmanagement in React ... 941<br/><br> 24.9 ... Ereignisse und deren Handler ... 948<br/><br> 24.10 ... Lifecycle von Komponenten ... 949<br/><br> 24.11 ... Die React-Hooks-API ... 960<br/><br> 24.12 ... CSS und React ... 968<br/><br> 24.13 ... Formulare in React ... 979<br/><br> 24.14 ... So geht es weiter ... 984<br/><br><br/><br><strong>25. Einführung in die grundlegenden Konzepte von Angular ... 987</strong><br/><br><br/> 25.1 ... Die nötigen Werkzeuge ... 987<br/><br> 25.2 ... Hallo Welt in Angular ... 988<br/><br> 25.3 ... Eine kleine Einführung in TypeScript ... 992<br/><br> 25.4 ... Komponenten ... 1005<br/><br> 25.5 ... Komponenten binden ... 1013<br/><br> 25.6 ... Pipes ... 1025<br/><br> 25.7 ... Der Datenfluss zwischen den Komponenten ... 1034<br/><br> 25.8 ... Styles für Komponenten ... 1041<br/><br> 25.9 ... Der Lebenszyklus einer Komponente ... 1044<br/><br> 25.10 ... Direktiven ... 1048<br/><br> 25.11 ... Wie geht es nun weiter? ... 1063<br/><br><br/><br><strong>26. Beispielprojekt erstellen, testen und optimieren ... 1065</strong><br/><br><br/> 26.1 ... Projektplanung ... 1066<br/><br> 26.2 ... Grundgerüst mit Inhalt erstellen ... 1068<br/><br> 26.3 ... Das Layout der Website festlegen und erstellen ... 1070<br/><br> 26.4 ... Typografie - Auswahl der Schriften ... 1077<br/><br> 26.5 ... Navigation ... 1080<br/><br> 26.6 ... Farben für das Projekt festlegen ... 1082<br/><br> 26.7 ... Grafiken und Bilder ... 1083<br/><br> 26.8 ... Website auf Funktionalität testen ... 1087<br/><br> 26.9 ... Website auf Barrierefreiheit hin testen ... 1091<br/><br> 26.10 ... Performance der Website testen und verbessern ... 1092<br/><br> 26.11 ... Nachhaltige Webentwicklung ... 1097<br/><br> 26.12 ... Zusammenfassung ... 1106<br/><br><br/><br><strong> Index ... 1107</strong><br/></P> <div class="av-fader" style="display: none;">
<div><span class="av-show desc-show"> </span> weiterlesen</div>
</div>
</div>
<hr class="hidden-xs" />
<div class="author_header">
Autorenporträt <span id="author_desc_show" onclick="return showDesc('author');" class="hidden-xs"><span class="av-show author-show"> </span>anzeigen</span> <span class="av-show-xs"> </span>
</div>
<div id="author_desc_text" class="author_body" style="display: none;">
<p class="bkdesccont">Jürgen Wolf ist seit über 16 Jahren Autor und seit mehr als 10 Jahren passionierter Digitalfotograf. Seine Buchthemen sind Bildbearbeitung, Fotografie, Webentwicklung, Betriebssysteme und Programmierung. Und egal welches Thema: Bei jedem Buch ist es sein Ziel, auch komplexe Zusammenhänge klar und verständlich zu erklären.</p> <span onclick="return hideDesc('author');" class="hidden-xs">Autorenporträt schließen</span>
</div> <hr class="hidden-xs" />
<div class="more_header">
Mehr Angebote zum Thema <span class="av-show-xs factive"> </span>
</div>
<div class="more_body">
<ul class="av-list-group">
<li><a href="/buecher/fachbuch/computer/prog/" class="jstrack_av_sitenav_cat" >Programmierung, Informatik</a>
</li>
<li><a href="/buecher/fachbuch/computer/prog/javascript/" class="jstrack_av_sitenav_cat" >Javascript, AJAX</a>
</li>
<li><a href="/suche.php?begriff=HTML5" class="normal jstrack_av_topics" >HTML5</a>
</li>
<li><a href="/suche.php?begriff=Internet" class="normal jstrack_av_topics" >Internet</a>
</li>
<li><a href="/suche.php?begriff=JavaScript" class="normal jstrack_av_topics" >JavaScript</a>
</li>
<li><a href="/suche.php?begriff=Programmierung" class="normal jstrack_av_topics" >Programmierung</a>
</li>
<li><a href="/suche.php?begriff=Web+2.0" class="normal jstrack_av_topics" >Web 2.0</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Piwik Tracking -->
<script>
var _paq = _paq || [];
_paq.push(["setEcommerceView",
"83629728A",
"HTML und CSS",
"Bücher > Fachbücher > Computer & Internet > Programmierung, Informatik > Javascript, AJAX",
49.9,
1]);
</script>
<!-- Criteo Tracking -->
<script type="text/plain" data-usercentrics="Criteo">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "viewItem", item: "83629728A" }
);
</script> </div>
<div class="container" id="cart_popup"></div>
<div class="container" id="img_popup"></div>
<div class="container" id="nl_popup"></div>
<a href="#" title="nach oben" role="button" class="scrollToTop btn btn-default"><span class="glyphicon glyphicon-arrow-up"></span></a>
<div class="container-fluid" id="foot0container">
<div class="container">
<div class="row largemarginbottom largemargintop">
<div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-2 col-md-8">
<p>Verpasse keine Highlights & Aktionen. Jetzt zum Newsletter anmelden.</p>
<form method="post" action="/o/footbox-new/newsletter.php" class="form-inline">
<div class="input-group">
<input type="email" name="nl_footer_email" class="form-control" id="nl_footer_email" placeholder="Eingabe E-Mail-Adresse" aria-label="Eingabe E-Mail-Adresse" required>
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-warning">
Anmelden
</button>
</span>
</div>
<div class="nl_sub_higlight">
<input type="text" class="form-control" name="nl_highlight_name" id="nl_highlight_name" placeholder="Bitte hier nichts eintragen" aria-label="Name">
</div>
<div class="bootstrap_v2">
<div class="checkbox">
<label>
<input type="checkbox" id="dsgvo" name="dsgvo" value="1" class="required" required>
Ja, ich möchte regelmäßig den Newsletter
zu Produkten, Neuheiten, Gutscheinen und Aktionen der Terrashop GmbH per E-Mail erhalten. </label>
</div>
<div class="margintop nl_text">
Diese Einwilligung kann ich jederzeit unter "<a href='/newsletter.php?nlunsub'>Abmelden</a>"
oder am Ende jeder E-Mail widerrufen.<br>
Zur Optimierung unseres Angebots werten wir anonymisiert aus, wie häufig Links in unserem
Newsletter angeklickt werden. Rückschlüsse auf Ihre Person oder
andere Daten sind nicht möglich. Eine Verknüpfung mit personenbezogenen Daten oder Bestelldaten
erfolgt nicht. Die Auswertung dient ausschließlich statistischen Zwecken.
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="foot1container">
<div id="footer" class="container">
<div class="row margintop">
<div class="col-sm-3 col-xs-12">
<p class="bold">Service <span class="show-xs"> </span></p>
<ul class="list-unstyled">
<li><a href="/kontakt.php">Kontakt</a></li>
<li><a href="/hilfe.php">Hilfe & FAQ</a>
<li><a href="/bestellung/hilfe.php#q8">Versandkosten</a></li>
<li><a href="/bestellung/hilfe.php#q7">Lieferung</a></li>
<li><a href="/konto.php">Mein Konto</a></li>
</ul>
<hr class="visible-xs" />
</div>
<div class="col-sm-3 col-xs-12">
<p class="bold">Rechtliches <span class="show-xs"> </span></p>
<ul class="list-unstyled">
<li><a href="/agb.php">AGB</a></li>
<li><a href="/sicherheit_datenschutz.php">Datenschutz</a></li>
<li><a href="/impressum.php">Impressum</a></li>
<li><a href="/widerrufsrecht.php">Widerrufsrecht</a></li>
<li><a href="/downloads/Widerrufsformular.pdf">Widerrufsformular</a></li>
<li><a href="/agb.php#pflichtangaben">Entsorgung und Umwelt</a></li>
</ul>
<hr class="visible-xs" />
</div>
<div class="col-sm-3 col-xs-12">
<p class="bold">Über Terrashop <span class="show-xs"> </span></p>
<ul class="list-unstyled">
<li><a href="/ueber_uns.php">Unternehmen</a></li>
<li><a href="/buecher-guenstig-kaufen.php">Mängelexemplare günstig kaufen</a></li>
<li><a href="/partnerprogramm.php">Partnerprogramm</a></li>
<li><a href="/ankauf">Für Händler & Verlage</a></li>
<li><a href="/bestseller/" title="Unsere beliebtesten Bücher. Aus allen Kategorien.">Terrashop-Bestseller</a></li>
</ul>
<hr class="visible-xs" />
</div>
<div class="col-sm-3 col-xs-12">
<p class="bold">Folge uns</p>
<a href="https://www.facebook.com/terrashop/?fref=ts" target="_blank" rel="noopener" style="margin-right: 10px;" title="Facebook">
<svg width="35px" height="35px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M241.871,256.001 C249.673,256.001 256,249.675 256,241.872 L256,14.129 C256,6.325 249.673,0 241.871,0 L14.129,0 C6.324,0 0,6.325 0,14.129 L0,241.872 C0,249.675 6.324,256.001 14.129,256.001 L241.871,256.001" fill="#888888"></path>
<path d="M176.635,256.001 L176.635,156.864 L209.912,156.864 L214.894,118.229 L176.635,118.229 L176.635,93.561 C176.635,82.375 179.742,74.752 195.783,74.752 L216.242,74.743 L216.242,40.188 C212.702,39.717 200.558,38.665 186.43,38.665 C156.932,38.665 136.738,56.67 136.738,89.736 L136.738,118.229 L103.376,118.229 L103.376,156.864 L136.738,156.864 L136.738,256.001 L176.635,256.001" fill="#FFFFFF"></path>
</g>
</svg></a>
</div>
</div>
<hr />
<div class="row" id="footer_payments">
<div class="col-xs-12 col-sm-2">
<p class="bold">Zahlungsarten</p>
</div>
<div class="col-xs-12 col-sm-10">
<a href="/bestellung/hilfe.php#q1">
<span class="payment-badge" title="PayPal">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 137.35" width="100%"><defs><style>.cls-1{fill:#009ee3;}.cls-1,.cls-2,.cls-3{fill-rule:evenodd;}.cls-2{fill:#113984;}.cls-3{fill:#172c70;}</style></defs><path class="cls-1" d="M192.95,386.87h38.74c20.8,0,28.63,10.53,27.42,26-2,25.54-17.44,39.67-37.92,39.67H210.85c-2.81,0-4.7,1.86-5.46,6.9L201,488.74c-0.29,1.9-1.29,3-2.79,3.15H173.87c-2.29,0-3.1-1.75-2.5-5.54l14.84-93.93C186.79,388.66,188.85,386.87,192.95,386.87Z" transform="translate(-143.48 -354.54)"/><path class="cls-2" d="M361.14,385.13c13.07,0,25.13,7.09,23.48,24.76-2,21-13.25,32.62-31,32.67H338.11c-2.23,0-3.31,1.82-3.89,5.55l-3,19.07c-0.45,2.88-1.93,4.3-4.11,4.3H312.68c-2.3,0-3.1-1.47-2.59-4.76L322,390.29c0.59-3.76,2-5.16,4.57-5.16h34.54Zm-23.5,40.92h11.75c7.35-.28,12.23-5.37,12.72-14.55,0.3-5.67-3.53-9.73-9.62-9.7l-11.06.05-3.79,24.2h0Zm86.21,39.58c1.32-1.2,2.66-1.82,2.47-.34l-0.47,3.54c-0.24,1.85.49,2.83,2.21,2.83h12.82c2.16,0,3.21-.87,3.74-4.21l7.9-49.58c0.4-2.49-.21-3.71-2.1-3.71H436.32c-1.27,0-1.89.71-2.22,2.65l-0.52,3.05c-0.27,1.59-1,1.87-1.68.27-2.39-5.66-8.49-8.2-17-8-19.77.41-33.1,15.42-34.53,34.66-1.1,14.88,9.56,26.57,23.62,26.57,10.2,0,14.76-3,19.9-7.7h0ZM413.11,458c-8.51,0-14.44-6.79-13.21-15.11s9.19-15.11,17.7-15.11,14.44,6.79,13.21,15.11S421.63,458,413.11,458h0Zm64.5-44h-13c-2.68,0-3.77,2-2.92,4.46l16.14,47.26L462,488.21c-1.33,1.88-.3,3.59,1.57,3.59h14.61a4.47,4.47,0,0,0,4.34-2.13l49.64-71.2c1.53-2.19.81-4.49-1.7-4.49H516.63c-2.37,0-3.32.94-4.68,2.91l-20.7,30L482,416.82C481.46,415,480.11,414,477.62,414Z" transform="translate(-143.48 -354.54)"/><path class="cls-1" d="M583.8,385.13c13.07,0,25.13,7.09,23.48,24.76-2,21-13.25,32.62-31,32.67H560.78c-2.23,0-3.31,1.82-3.89,5.55l-3,19.07c-0.45,2.88-1.93,4.3-4.11,4.3H535.35c-2.3,0-3.1-1.47-2.59-4.76l11.93-76.45c0.59-3.76,2-5.16,4.57-5.16H583.8Zm-23.5,40.92h11.75c7.35-.28,12.23-5.37,12.72-14.55,0.3-5.67-3.53-9.73-9.62-9.7l-11.06.05-3.79,24.2h0Zm86.21,39.58c1.32-1.2,2.66-1.82,2.47-.34l-0.47,3.54c-0.24,1.85.49,2.83,2.21,2.83h12.82c2.16,0,3.21-.87,3.74-4.21l7.9-49.58c0.4-2.49-.21-3.71-2.1-3.71H659c-1.27,0-1.89.71-2.22,2.65l-0.52,3.05c-0.27,1.59-1,1.87-1.68.27-2.39-5.66-8.49-8.2-17-8-19.77.41-33.1,15.42-34.53,34.66-1.1,14.88,9.56,26.57,23.62,26.57,10.2,0,14.76-3,19.9-7.7h0ZM635.78,458c-8.51,0-14.44-6.79-13.21-15.11s9.19-15.11,17.7-15.11,14.44,6.79,13.21,15.11S644.29,458,635.78,458h0Zm59.13,13.74h-14.8a1.75,1.75,0,0,1-1.81-2l13-82.36a2.55,2.55,0,0,1,2.46-2h14.8a1.75,1.75,0,0,1,1.81,2l-13,82.36A2.55,2.55,0,0,1,694.91,471.76Z" transform="translate(-143.48 -354.54)"/><path class="cls-2" d="M168.72,354.54h38.78c10.92,0,23.88.35,32.54,8,5.79,5.11,8.83,13.24,8.13,22-2.38,29.61-20.09,46.2-43.85,46.2H185.2c-3.26,0-5.41,2.16-6.33,8l-5.34,34c-0.35,2.2-1.3,3.5-3,3.66H146.6c-2.65,0-3.59-2-2.9-6.42L160.9,361C161.59,356.62,164,354.54,168.72,354.54Z" transform="translate(-143.48 -354.54)"/><path class="cls-3" d="M179.43,435.29l6.77-42.87c0.59-3.76,2.65-5.56,6.75-5.56h38.74c6.41,0,11.6,1,15.66,2.85-3.89,26.36-20.94,41-43.26,41H185C182.44,430.72,180.56,432,179.43,435.29Z" transform="translate(-143.48 -354.54)"/></svg>
</span>
<span class="payment-badge" title="Mastercard">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="7.5 7.5 116.49471 72.01416" height="100%"><defs><style>.c{fill:#ff5f00;}.d{fill:#eb001b;}.e{fill:#f79e1b;}</style></defs><rect class="c" x="48.37" y="15.14" width="34.66" height="56.61"/><path class="d" d="M51.94,43.45a35.94,35.94,0,0,1,13.75-28.3,36,36,0,1,0,0,56.61A35.94,35.94,0,0,1,51.94,43.45Z"/><path class="e" d="M120.5,65.76V64.6H121v-.24h-1.19v.24h.47v1.16Zm2.31,0v-1.4h-.36l-.42,1-.42-1h-.36v1.4h.26V64.7l.39.91h.27l.39-.91v1.06Z"/><path class="e" d="M123.94,43.45a36,36,0,0,1-58.25,28.3,36,36,0,0,0,0-56.61,36,36,0,0,1,58.25,28.3Z"/></svg>
</span>
<span class="payment-badge" title="VISA">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 324.68351" width="100%" height="100%"><path style="fill:#1434cb;fill-opacity:1;stroke:none" d="m 651.18503,0.50000002 c -70.93272,0 -134.32163,36.76584998 -134.32163,104.69357998 0,77.90028 112.42264,83.28082 112.42264,122.41576 0,16.47806 -18.88384,31.22851 -51.13668,31.22851 -45.77308,0 -79.98403,-20.61081 -79.98403,-20.61081 l -14.63836,68.54658 c 0,0 39.41037,17.40989 91.73375,17.40989 77.55217,0 138.57651,-38.57104 138.57651,-107.66029 0,-82.3157 -112.89106,-87.53633 -112.89106,-123.86008 0,-12.9082 15.50201,-27.05169 47.66251,-27.05169 36.28682,0 65.89216,14.98968 65.89216,14.98968 l 14.32608,-66.20444 c 0,0 -32.21317,-13.89668998 -77.64189,-13.89668998 z M 2.2175605,5.49657 0.49999253,15.48969 c 0,0 29.84159547,5.46149 56.71878047,16.35593 34.606624,12.4927 37.071853,19.7653 42.900167,42.35367 l 63.51098,244.83152 85.13673,0 131.15974,-313.53424 -84.94155,0 L 210.7069,218.67018 176.3165,37.97422 C 173.1626,17.29371 157.18709,5.49657 137.63219,5.49657 l -135.4146295,0 z m 411.8650095,0 -66.63383,313.53424 80.99895,0 66.39962,-313.53424 -80.76474,0 z m 451.75943,0 c -19.53181,0 -29.88045,10.45695 -37.47421,28.73022 l -118.66834,284.80402 84.94155,0 16.434,-47.46734 103.48348,0 9.99312,47.46734 74.94843,0 -65.3847,-313.53424 -68.27333,0 z m 11.04709,84.70733 25.17799,117.65341 -67.45359,0 42.2756,-117.65341 z" /></svg>
</span>
<span class="payment-badge" title="American Express">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="14.1 13.9 42.4 42.4" height="100%"><style type="text/css">.st0{fill:#006FCF;}</style><path class="st0" d="M48.9,24.3l1.4-3.7h6.2v-6.7H14.1v42.4h42.4v-6.7h-5.9L48.4,47l-2.2,2.5H29.6V36.2h-5.5L31,20.7h6.7l1.6,3.5v-3.5h8.3L48.9,24.3L48.9,24.3z M44.3,26.8v-1.5l0.6,1.5l2.8,7.4h2.6l2.8-7.4l0.5-1.5v8.8h2.9V22.8h-4.8l-2.2,5.7l-0.6,1.6l-0.6-1.6l-2.2-5.7h-4.8V34h3V26.8L44.3,26.8z M38.1,34h3.3l-5-11.3h-3.9l-5,11.3h3.3l0.9-2.2h5.5L38.1,34L38.1,34z M33.9,26.6l0.6-1.4l0.6,1.4l1.2,2.9h-3.5L33.9,26.6L33.9,26.6z M31.9,36.2v11.3h9.4V45h-6.6v-2h6.4v-2.4h-6.4v-2h6.6v-2.4L31.9,36.2L31.9,36.2z M51.9,47.3h3.7l-5.3-5.6l5.3-5.6h-3.7l-3.4,3.7l-3.4-3.7h-3.8l5.3,5.7l-5.3,5.6h3.6l3.4-3.7L51.9,47.3L51.9,47.3z M53.3,41.8l3.2,3.3v-6.5L53.3,41.8L53.3,41.8z"/></svg>
</span>
<span class="payment-badge">
Rechnung
</span>
<span class="payment-badge">
Lastschrift
</span>
<span class="payment-badge">
Vorkasse
</span>
</a>
<hr class="visible-xs" />
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2">
<p class="bold">Wir liefern mit</p>
</div>
<div class="col-xs-12 col-sm-10">
<a href="/bestellung/hilfe.php#q7" title="Versand" aria-label="Versand">
<div class="ts_sprite ts_sprite-dhl1"> </div><div class="ts_sprite ts_sprite-dhl2"> </div>
</a>
</div>
</div>
<hr />
<div class="row marginbottom">
<div class="col-xs-12 col-sm-6 text-center">
<p class="bold">Geprüfter Online-Shop</p>
<a href="https://cert.ehi-siegel.de/webshop/terrashop-de_4034216?lang=deu" target="_blank" rel="noopener" title="Webshop Trustmark" aria-label="Webshop Trustmark">
<img src="https://dashboard.trustprofile.com/banners/4000167/4034216/1724709717000.svg" width="70" height="70" alt="Webshop Trustmark">
</a>
<hr class="visible-xs" />
</div>
<div class="col-xs-12 col-sm-6 text-center">
<p class="bold">Gütesiegel</p>
<a href="https://www.trustedshops.de/bewertung/info_XE5E4E109D08574834DA9153BCAE599D0.html" target="_blank" rel="noopener" title="Trusted Shops" aria-label="Trusted Shops">
<div class="ts_sprite ts_sprite-trusted_shops"> </div>
</a>
</div>
</div>
</div>
</div><div class="container-fluid" id="foot2container">
<div id="price_hints" class="container">
<div class="row margintop">
<div class="col-xs-12">
<sup>1</sup> Mängelexemplare sind Bücher mit leichten Beschädigungen wie angestoßenen Ecken, Kratzer auf dem Umschlag, Beschädigungen/Dellen am Buchschnitt oder ähnlichem. Diese Bücher sind durch einen Stempel "Mängelexemplar" als solche gekennzeichnet. Die frühere Buchpreisbindung ist dadurch aufgehoben. Angaben zu Preissenkungen beziehen sich auf den gebundenen Preis eines mangelfreien Exemplars. <br /><br />
<sup>2</sup> Mängelexemplare mit ehemals gebundenen Ladenpreis. Mit leichten Beschädigungen wie angestoßenen Ecken, Kratzer auf dem Umschlag, Beschädigungen/Dellen am Buchschnitt oder ähnlichem. Diese Bücher können mit einem Stempel "Mängelexemplar" als solche gekennzeichnet sein. Angaben zu Preissenkungen beziehen sich auf den ehemaligen gebundenen Preis eines mangelfreien Exemplars. <br /><br />
<sup>3</sup> Die Preisbindung dieses Artikels wurde aufgehoben. Angaben zu Preissenkungen beziehen sich auf den vorherigen gebundenen Ladenpreis. <br /><br />
<sup>4</sup> Der Preisvergleich bezieht sich auf die unverbindliche Preisempfehlung, wie diese vom Hersteller oder von einem Lieferanten zur Verfügung gestellt wird. <br /><br />
<sup>5</sup> Diese Artikel haben leichte Beschädigungen wie angestoßenen Ecken, Kratzer oder ähnliches und können teilweise mit einem Stempel "Mängelexemplar" als solche gekennzeichnet sein. Der Preisvergleich bezieht sich auf die unverbindliche Preisempfehlung, wie diese vom Hersteller oder von einem Lieferanten zur Verfügung gestellt wird. <br /><br />
<sup>6</sup> Der Preisvergleich bezieht sich auf die Summe der Einzelpreise der Artikel im Paket. Bei den zum Kauf angebotenen Artikeln handelt es sich um Mängelexemplare oder die Preisbindung dieser Artikel wurde aufgehoben oder der Preis wurde vom Verlag gesenkt oder um eine ehemalige unverbindliche Preisempfehlung des Herstellers. Angaben zu Preissenkungen beziehen sich auf den vorherigen Preis. Der jeweils zutreffende Grund wird Ihnen auf der Artikelseite dargestellt. <br /><br />
<sup>7</sup> Der gebundene Preis des Buches wurde vom Verlag gesenkt. Angaben zu Preissenkungen beziehen sich auf den vorherigen gebundenen Preis. <br /><br />
<sup>8</sup> Sonderausgabe in anderer Ausstattung, inhaltlich identisch. Angaben zu Preissenkungen beziehen sich auf den Vergleich Originalausgabe zu Sonderausgabe. <br /><br />
<sup>9</sup> Der Preisvergleich bezieht sich auf den Originalpreis eines neuen Exemplares. <br /><br />
</div>
</div>
</div>
</div>
<div id="price_hints_2" class="container">
<div class="row xlargemargintop xlargemarginbottom">
<div class="col-xs-12 text-center marginbottom">
<a href="#" onclick="UC_UI.showSecondLayer(); return false;">Cookie- und Privatsphäre-Einstellungen</a>
</div>
<div class="col-xs-12 text-center marginbottom">
<a href="/impressum.php">Impressum</a>
|
<a href="/agb.php">AGB</a>
|
<a href="/sicherheit_datenschutz.php">Datenschutz</a>
|
<a href="/widerrufsrecht.php">Widerrufsrecht</a>
</div>
<div class="col-xs-12 text-center gray">
Alle Preisangaben inkl. gesetzlicher MwSt. und ggf. zzgl.
<a href="/bestellung/hilfe.php#q8">Versandkosten</a>.
</div>
</div>
</div>
<script src="/bootstrap/js/bootstrap.min.600b25bfc882f4d0110fc99e35baefc1.js"></script>
<script>
$(document).ready(function() {
$("img.lazy").lazy({
attribute: 'data-original',
// called whenever an element could not be handled
onError: function(element) {
var imageSrc = element.data('original');
$.ajax({
type: "POST",
url: "/missing_image__ajax__.php",
data: "missing_img="+imageSrc
});
}
});
});
</script>
<script>
$(document).ready(function() {
checkWishlistButton();
});
</script>
<div id="set_consents_cookie"></div>
<link rel="preconnect" href="https://privacy-proxy.usercentrics.eu">
<link rel="preload" href="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script">
<script>
if (document.location.href.includes('www.terrashop.de/impressum.php') || document.location.href.includes('www.terrashop.de/sicherheit_datenschutz.php')) {
var UC_UI_SUPPRESS_CMP_DISPLAY=true;
}
</script>
<script id="usercentrics-cmp" data-settings-id="7dkWvWp5v" data-language="de" src="https://web.cmp.usercentrics.eu/ui/loader.js" async> </script>
<script type="application/javascript" src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"></script><!-- Trusted Shops -->
<script type="text/plain" data-usercentrics="Trusted Shops Trustbadge" async
data-desktop-y-offset="150"
data-mobile-y-offset="0"
data-desktop-disable-reviews="false"
data-desktop-enable-custom="false"
data-desktop-position="right"
data-desktop-custom-width="156"
data-desktop-enable-fadeout="false"
data-disable-mobile="false"
data-disable-trustbadge="false"
data-mobile-custom-width="156"
data-mobile-disable-reviews="false"
data-mobile-enable-custom="false"
data-mobile-position="right"
data-mobile-enable-topbar="false"
data-mobile-enable-fadeout="true"
data-color-scheme="light"
charset="UTF-8"
src="//widgets.trustedshops.com/js/XE5E4E109D08574834DA9153BCAE599D0.js">
</script>
<!-- Start Tracking Code -->
<!-- Start Tracking Code -->
<script type="text/plain" data-usercentrics="Facebook Pixel">
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1508453879466864');
fbq('track', 'PixelInitialized', {});
</script><script type="text/plain" data-usercentrics="Facebook Pixel">
fbq('track', 'ViewContent', {value: '49.9', currency: 'EUR', content_name: 'HTML und CSS', content_type: 'product', content_ids: ['83629728A'], content_category: 'Bücher > Fachbücher > Computer & Internet > Programmierung, Informatik > Javascript, AJAX', terrashop_option1: 0}, {eventID: 'qzufxZtP2CcmDaNxHqT9'});
</script>
<!-- Ende Tracking Code -->
<!-- Ende Tracking Code -->
</body>
</html>
