Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Sitemap

Startseite Vorwort Videokurs HTML5, CSS3 und Webdesign Videokurs bestellen FAQ Videokurs Nutzer-Feedback HTML Befehle Übersicht CSS Befehle Übersicht HTML lernen
– Website erstellen & strukturieren
Begriffsklärung Homepage, Website, Webseite benötigte Software Vorgehensweise Website erstellen was beim Laden einer Website passiert erste HTML-Seite Grundlagen - HTML-TAG Textabsatz erstellen - <p> Lösung zur Übung vorformatierter Text <pre> Überschriften <h1>, <h2> ... Lösung Übung Überschriften HTML-Code deaktivieren/kommentieren HTML-Editor Brackets Sublime Text HTML-Editor Scriptly HTML-Editor Phase 5 HTML-Editor für Mac Fonts für Entwickler HTML-Grundgerüst Aufgabenlösung Seitenaufbau Text fett <b> - <strong> Text kursiv <i> oder <em> Schachteln von HTML-TAGs Aufgabenlösung Schachteln von HTML-TAGs unterstreichen Aufgabenlösung validieren HTML-Seite Sauberer HTML-Code Zeichen hochgestellt <sup> bzw. tiefgestellt <sub> Listen, Aufzählungen <ul>, <ol>, <li> Aufgabenlösung nummerierte Liste Geschachtelte Listen – Liste in Liste Definitionsliste <dl>, <dt> u. <dd> Aufgabenlösung Definitionslisten erzwungener Zeilenumbruch <br> Trennlinie <hr> Bilder, Fotos u. Grafiken integrieren <img Bildmaterial Bilder komprimieren im Browser Bilder und Bildunterschrift zusammenbringen Natives Lazy-Loading - schnellerer Seitenaufbau Attribute bei HTML-TAGs Tabellen <table> <tr> <td> Tabellenkopf u. Fuß Tabellenzellen verbinden Links, Hyperlinks <a href> Dateinamen interne Links Steuerung erstellen externe Links Verzeichnisse PDFs als Download Bild verlinken Link mit Sprungmarke Aufgabenlösung Sprungmarken E-Mail verlinken mailto: klickbare Telefonnummern <a href=tel: Bereiche mit <div> und <span> Aufgabenlösung <div> und <span> HTML5 - Inhalte strukturieren Videos einbinden mit HTML5 <video> Musik einbinden mit HTML5 <audio> HTML Farben HTML-Befehle <details> und <summary> Formulare <form> Einzeiliges Eingabefeld <input> submit-Button zum Absenden des Formulars Formularelement Radiobutton <input type=radio Platzhalter-Attribut :placeholder Formularelement <textarea> Formularelement <textarea> CSS Tricks Design für Formulare Auswahlliste als Formularelement Auswahllisten option farbig hinterlegen Komfort bei Formularen Label Formularbeschriftung <label> Gruppieren: <fieldset> und <legend> Design: LEGEND innerhalb von FIELDSET über CSS Formularfeld number HTML5 Domainnamen alte Domainnamen Provider & Domains Internetprovider empfehlen Domainname umziehen / Domainnamen kaufen kostenloser Webspace und seine Kosten Online stellen per FTP per FileZilla per WS-FTP CSS lernen
– Webdesign erstellen
Trennung Inhalt Design Aufbau CSS Befehle CSS in HTML einbinden Kommentare in CSS Farben mit CSS nutzen Schriften einsetzen Schriftfamilien festlegen font-family: Schriftgröße CSS font-size: Schriftstärke normal, bold - font-weight: Zeichenabstand – letter-spacing: Wordabstand - word-spacing: Text ausrichten text-align Text in Großbuchstaben anzeigen Zeilenhöhe / Abstände line-height: Text unterstreichen, durchstreichen ... text-decoration: Kurzschreibweise font: CSS-Elemente gezielt ansprechen DIV und SPANs CLASS und ID Beispiel und Aufgabe Box-Modell Hintergrundfarbe background-color: Breite über width: Höhe über height: Rahmen mit CSS border: Innenabstand padding: Außenabstand margin: Hintergrundbilder integrieren background-image: Beispiele Box-Modell Box-Modell box-sizing: border-box Design per CSS - float Seitenbreite in CSS begrenzen Mittige Ausrichtung des Layouts Kopfzeile integrieren Fußzeile integrieren dreispaltiges Layout Listenelemente mit CSS gestalten - Navigation erstellen Aufzählungen mit Unterebenen und erweiterter Nummerierung Steuerung per CSS Navigation und Pseudoklassen Steuerung mit Feedback Block- und Inline-Elemente verstehen Steuerung erstellen über Änderung der Darstellung Grafik statt Aufzählungszeichen Bilder und Hintergrund Bilder und Design: Sofortbildkamera-Look Bilder und Design: wenn Bilder kollidieren img-Bilder mit CSS einpassen - object-fit: CSS Slider ohne JavaScript absolute Positionierung Lösung Aufgabe absolute Positionierung Kindelemente und absolute Positionierung Sticky Footer - Fußleiste unten Mauszeiger ändern Berechnungen über calc() CSS Tipps und Tricks sanftes Scrollen scroll-behavior: smooth; CSS-Anweisungen „durchsetzen“ !important Blinkenden Text anzeigen Druckausgabe: Waisenkind und Witwe CSS-Layout-Generator CSS3 Selektoren in CSS3 - Übersicht Attributselektor Struktur-Pseudoklassen nth-child(n) last-child - letztes Element Deckkraft (opacity) Lösung zur opacity-Aufgabe CSS3 Farben HSL Lösung zur HSL-Farben-Aufgabe Farben mit Transparenz (HSLA) Aufgabe zu HSLA Lösung zur HSLA-Farben-Aufgabe CSS Gradient – Farbverläufe ohne Grafiken Farbverlauf kreisförmig Muster erzeugen Schatten box-shadow Lösung zu box-shadow abgerundete Ecken Lösung zu border-radius unterschiedliche Rundungen Lösung Kreis mit CSS3 asymmetrische Rundungen Text mit Schatten Outline-Schrift per CSS3 eingestanzte Schrift brennende Schrift Schrift als Neonreklame Elemente umwandeln - transform: Live-Demo CSS3 transform Elemente rotieren Lösung transform: rotate Drehpunkt transform-origin Aufgabenlösung transform-origin Skalieren transform: scale Lösung zu skalieren neigen transform: skew Lösung transform: skew Transformationen kombinieren Lösung transform: kombinieren tranform: translate - verschieben CSS3 transition Animationen CSS3 keyframes: komplexe Animationen Mehrere Hintergrundgrafiken ::before / ::after – CSS erzeugt Inhalt und Design über Pseudoelemente CSS-Anweisung content Beispiele für ::before / ::after und content: Über content: Umbruch erzwingen Dreieck über CSS erstellen Stern über CSS erstellen Wolke über CSS ohne Grafik erstellen Herz über CSS ohne Grafik erstellen Warnschild über CSS ohne Grafik erstellen Ampel über CSS ohne Grafik erstellen animierter Farbverlauf Button mit Glanzeffekt CSS Flexbox Layout Websites nachbauen
– Schritt für Schritt
Vorstellung Projekte 1-Spalten-Layout für Websites Design über CSS fertiges Beispiel 2 Spalten Layout Zentriertes Design Beispiel 2 Spalten Layout 3-Spalten-Layout mit CSS erstellen HTML5-Grundgerüst Inhalte übernehmen & strukturieren Bereiche über HTML5 festlegen Bilder - HTML oder CSS? Einstieg ins Design CSS 3 Spalten Layout 3-Spalten-Layout zentriert Lücken im Design Design Kopfbereich Hintergrundgrafiken für das Design Bilder im Inhalt Abstände und Schriften Steuerung links Steuerung oben mit Buttons Fußbereich und float mobiles Design der 3 Beispielprojekte für Handy und Tablet Responsive Webdesign Viewport richtig setzen Media Queries Kontrolle direkt im Browser Bilder bei Responsive Design SVG nutzen externe Videos einbinden Sticky Footer bei Responsive Design Toggle Menü ohne JavaScript erst normale Steuerung erweitern zur Menü-Steuerung daraus Toggle-Menü für Responsive Webdesign Bildbearbeitung für Websites Farbtheorie - harmonische Farben finden Bildbearbeitung mit GIMP Grundlagen Gimp Horizont begradigen Bilder beschneiden Bilderinhalte ergänzen Bildgröße ändern Bilder nachschärfen Speichern mit idealer Dateigröße flaue Bilder aufmotzen Favicon erstellen viele Bilder schnell bearbeiten Bildbearbeitung: verschiedene Software Bilderausschnitt & Größe verändern mit IrfanView Bilder optimieren mit FixFoto Schatten mit Corel Draw fremde Bilder für eigene Website Ideale Fotos für Websites Webdesign verstehen und anwenden Gestaltpsychologie Gesetz der Nähe für Webdesign Gesetz der Ähnlichkeit Gesetz der Kontinuität für Webdesign Gesetz der Geschlossenheit Gesetz der Erfahrung Gesetz des gemeinsamen Schicksals Gesetz der Symmetrie Gesetz der guten Gestalt Schriften und Webdesign Schriftarten und Wirkung Schriften für besonderes Design 2 Schriften auswählen Webdesign: Zeilenlänge und Zeilenabstand Abstand aufheben Blocksatz vs Flattersatz Hervorhebungen im Text Typografie Unterschneidung (kerning) Bilder animieren Suchmaschinenoptimierung – SEO bei Suchmaschinen anmelden Zielgenaue Keywords finden Metatags & Metaelemente Robots unterstützen Sitemap nutzen .htaccess auf Server für korrekte Umlaute Website mit oder ohne www aufrufbar mod_rewrite - URLs umwandeln SSL erzwingen Domains weiterleiten auf Hauptdomain URL wegen Schreibfehler weiterleiten Schreiben für das Internet Usability Geschwindigkeit einer Webseite messen Breadcrumbs-Navigation HTTP Fehlercodes 401, 404, 500 404 eigene Fehlerseite Passwortschutz über .htpasswd Webseiten aus Google-Index löschen Reputation Management Programmierung und Websites JavaScript Tutorial PHP programmieren Forum ins Forum Moderator im Forum: Stef mehr zu HTML, CSS und Websites Fortgeschrittene Recht SSI – Server Side Includes Geld verdienen im Internet Web Apps erstellen Web App versus Native App Unterschiede im Seitenaufbau jQuery Mobile jQuery Mobile Tutorial mit PHP und Datenbank Tipps & Tricks Google Maps Software Softwareempfehlungen Bücher E-Books bestellen Linksammlung Referenz Sonderzeichen Referenz Umlaute und Eszett Währungssymbole andere Sprachen Zeichenreferenz Pfeile Mathematische Sonderzeichen Griechisches Alphabet Zeichenreferenz Bildschirmmasken HTML Leerzeichen Maßeinheiten Cronjobs erstellen Abk. - Abkürzungen headerinformationen lorem ipsum Generator Helfen Sie mit... Archiv Bookmarklet WYSIWYG-Editoren SuperHTML Web Studio Attribute bei Aufzählungen hoch-tief, groß-klein Bilder ausrichten Trennlinie Attribute Attribute bei Tabellen Frames iFrames Farbangaben veraltet - font color Neuigkeiten Gewinnspiel 2006 per Netscape Composer Layout über Tabellen per Scriptly IE Toolbar Firefox Rund ums Internet Metatags Auswirkung Impressum Kontakt Suche Sitemap Datenschutzerklärung

weitere eigene Projekte:

(Schreib-)Fehler gefunden?

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:

Fehler:

Verbesserung:

Ihr Name (kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.