Sitemap

Startseite Vorwort E-Books zum Kurs Videokurs Erstellen von Websites: HTML5, CSS3 und Webdesign Videokurs bestellen 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 unterstreichen validieren HTML-Seite Sauberer HTML-Code Zeichen hochgestellt <sup> bzw. tiefgestellt <sub> Listen, Aufzählungen <ul>, <ol>, <li> Geschachtelte Listen – Liste in Liste Definitionsliste <dl>, <dt> u. <dd> 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 Zitate kennzeichnen <blockquote> Veraltetes <del> und Neues <ins> 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> HTML5 - Inhalte strukturieren Videos einbinden mit HTML5 <video> Musik einbinden mit HTML5 <audio> HTML Farben HTML-Befehle <details> und <summary> Formulare <form> Formular starten <form> Einzeiliges Eingabefeld <input> submit-Button zum Absenden des Formulars Formularelement Radiobutton <input type=radio Formularelement Checkbox <input type=checkbox Platzhalter-Attribut :placeholder Formularelement <textarea> Formularelement <textarea> CSS Tricks Upload Dateien Formular file 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: Fallback font-display: swap 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: erste Zeile einrücken text-indent 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 Listenpunkte farbig ::marker 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 Bereich oben ankleben - position: sticky Sticky Footer - Fußleiste unten Mauszeiger ändern Berechnungen über calc() CSS Tipps und Tricks sanftes Scrollen scroll-behavior: smooth; bevorzugtes Farbschema (hell/dunkel) vom Betriebssystem 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: Icon neben Text automatisch anzeigen Ü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 Kolumnen/Spalten wie in Zeitung über columns CSS Flexbox Layout CSS Flexbox als horizontale Steuerung CSS Grid: Layout-System für Websites 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 Text proportional skalieren 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 max-image-preview - Bilder größer in Bildersuche robots.txt 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 htaccess index-Reihenfolge festlegen .ico komprimiert übertragen 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 mehr zu HTML, CSS und Websites Fortgeschrittene Recht Emmet – schneller Code erstellen 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 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 per Netscape Composer Layout über Tabellen per Scriptly IE Toolbar Firefox Metatags Auswirkung Impressum Kontakt Suche Sitemap Datenschutzerklärung

Weiterempfehlen • Social Bookmarks • Vielen Dank

• tweet
• Facebook teilen
• pin it
• mitteilen
• teilen
• teilen
• teilen

Suche Datenschutzerklärung