weboffice.digital - Dokumentation
Branche Beauty Branche Gastro Branche Handel
PDF

HTML

HTML

Mit dem HTML-Bereich kannst du eigenen HTML-Code direkt in deine Website einbetten. Das ist nützlich für spezielle Widgets, Einbettungen von Drittanbietern oder individuelle Gestaltungen, die mit den Standard-Bereichen nicht möglich sind.

Voraussetzungen

Grundkenntnisse in HTML sind hilfreich, aber nicht zwingend erforderlich. Du kannst auch fertigen Code von anderen Websites oder Diensten kopieren und einfügen.

Aufbau der Seite

HTML-Editor

  • Großes Textfeld für deinen HTML-Code
  • Syntax-Highlighting für bessere Übersicht
  • Automatische Einrückung und Formatierung
  • Sofortige Vorschau der Änderungen

Code-Ausführung

  • Dein HTML-Code wird direkt in die Website eingebettet
  • JavaScript und CSS werden unterstützt
  • Externe Ressourcen können eingebunden werden
  • Der Code wird ohne zusätzliche Umhüllung ausgegeben

So arbeitest du mit dieser Seite

HTML-Code hinzufügen

  1. Füge deinen HTML-Code in das große Textfeld ein
  2. Du kannst auch CSS-Styles mit <style>-Tags hinzufügen
  3. JavaScript ist mit <script>-Tags möglich
  4. Speichere die Änderungen, um sie live zu sehen

Externe Inhalte einbetten

YouTube-Videos:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID" 
  frameborder="0" allowfullscreen></iframe>

Google Maps:

<iframe src="https://www.google.com/maps/embed?pb=..."
  width="600" height="450" frameborder="0"></iframe>

Social Media Posts:

  • Kopiere den Einbettungscode von Twitter, Facebook, Instagram
  • Füge ihn direkt in den HTML-Bereich ein

Eigene Styles hinzufügen

<style>
.mein-bereich {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}
</style>
<div class="mein-bereich">
  <h3>Mein individueller Bereich</h3>
  <p>Hier steht mein Text.</p>
</div>

Tipps und Hinweise

Sicherheit:

  • Verwende nur vertrauenswürdigen Code
  • Prüfe externe Einbettungen auf Seriosität
  • Vermeide Code von unbekannten Quellen
  • Teste Änderungen immer in der Vorschau

Responsive Design:

  • Achte darauf, dass dein Code auf Mobilgeräten funktioniert
  • Verwende relative Größenangaben (% statt px)
  • Teste auf verschiedenen Bildschirmgrößen
  • Bootstrap-Klassen sind verfügbar

Häufige Anwendungen:

  • Kontaktformulare: Von externen Anbietern
  • Buchungswidgets: Für Termine oder Events
  • Zahlungsschaltflächen: PayPal, Stripe etc.
  • Newsletter-Anmeldung: Mailchimp, Newsletter2Go
  • Chat-Widgets: Kundenservice-Tools
  • Tracking-Codes: Google Analytics, Facebook Pixel

Code-Qualität:

  • Verwende sauberen, strukturierten Code
  • Kommentiere komplexe Bereiche
  • Halte den Code so einfach wie möglich
  • Entferne unnötige Leerzeichen und Kommentare

Fehlerbehebung:

  • Prüfe die Browser-Konsole bei Problemen
  • Validiere deinen HTML-Code online
  • Teste schrittweise: Füge Code in kleinen Teilen hinzu
  • Sichere funktionierende Versionen

Performance:

  • Vermeide zu große externe Dateien
  • Optimiere Bilder vor der Einbettung
  • Verwende CDN-Links für bekannte Bibliotheken
  • Minimiere JavaScript-Code

Verwandte Seiten