Neu! Aktualisierung der Webseite!

Zur aktualisierten Webseite geht es hier:

Rhein-Main-Experten NEU!

HTML

  1. HTML und HTML5

    Den HTML-Code (Hypertext Markup Language) setzen Browser um: In Layout,  Schriftarten, Hervorhebungen, Farben. Innerhalb des HTML-Codes können Grafiken, Fotos, Multimedia-Module geladen und Programme angestoßen werden - sowohl client- als auch serverseitig.

    HTML Befehle umschließen den jeweiligen Text: Beginn und Ende einer Anweisung werden mit < > und </> gekennzeichnet:

    <strong>dies ist wichtig</strong> bewirkt z.B. die Hervorhebung von dies ist wichtig.

  2. HTML - Grundlegende Struktur der Anzeige

    Herkömmliche HTML Dokumente sind strukturiert durch

    Meta-Angaben über die Webseite <head> </head>

    Browser-Titel der Webseite <title> </title>

    eigentlicher Inhalt der Webseite <body> </body>

    Innerhalb des eigentlichen Inhalts:

    Überschriften: <h1>.....</h1>, <h2>......</h2>,<h3>.....</h3> bis <hn>............</hn>

    Zeilen:<div>............</div>

    Bereiche:<span>........</span>

  3. HTML5 - Grundlegende Struktur der Anzeige

    In HTML5 kommen folgende Strukturelemente hinzu, die der typischen Aufteilung von Vorlagen entsprechen.

    <header> Kopf der Webseite
    <nav> Navigation/Menü
    <section> Gruppe von Elementen
    <figure>Anmerkungen, Codebeispiele, Abbildungen, Zeichnungen, Fotos und Videos
    <article> der eigentliche Inhalt der Webseite
    <aside> Zusatz zum Inhalt der Webseite
    <footer>Fuß der Webseite

  4. HTML5-Grundgerüst

    <!DOCTYPE html>

    <!-- Die DOCTYPE Angabe erklärt dem Browser, welche HTML-Version verwendet wird. in diesem Fall die neueste Version HTML5 -->

    <html lang="de">

  5. HTML5 Grundgerüst zum Kopieren
    <!DOCTYPE html>
    <html lang="de">
    <head>


    <META name="robots" content="index, follow">
    <meta charset="UTF-8">

    <title>Titel Ihrer Webseite</title>
    <meta name="description" content="hier Beschreibung Ihrer Webseite einfügen">

    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  6. HTML und CSS

    Sie können Stylesheet-Angaben innerhalb eines HTML-Dokuments machen, aus Sicherheits- und praktischen Gründen sollten Sie die Angaben jedoch in eine eigene .css Datei schreiben.

  7. Das Box-Modell

    CSS-Elemente können eine definierte Breite, Höhe, einen Innenabstand, Rahmen und einen Außenabstand haben.

  8. Positionieren mit CSS - Beispiel: zwei Spalten

    Zwei Spalten nebeneinander positionieren mit position:absolute,

  9. Editoren

    Wordpad, Windows Editor, Word können Sie für HTML und CSS Code nicht verwenden. Sie benötigen einen Editor, der im Format utf-8 abspeichert.

  10. Tabellen mit HTML

    Tabellen werden in Zeilen und Spalten definiert. Breite und Höhe kann relativ in px oder absolut in % angegeben werden. Vergleich zu Excel: Spaltenkennzeichnung A,B,C... Zeilenkennzeichnung 1,2,3, Sie sagen dem Browser  Zeile1, Spalte A,B,C...., Zeile2,Spalte A,B, C...Zeile 3, Spalte A,B,C...

  11. Unterschiedliche Anzeige in unterschiedlichen Browsern

    Mit HTML5 und CSS3 gibt es wieder eine Reihe potentiell unterschiedliche Umsetzungen von Webseiten in Browsern, die im Code abgefangen werden müssen, will man, dass die Webseite zuverlässig in gleicher Weise in allen Browsern angezeigt wird. Ganz wird man es nie schaffen.

    Browser und Browser-Versionen richten sich nach den verwendeten Geräten und ihren Betriebssystemen. Sie finden die aktuelle Verbreitung von Browsern in Deutschland hier:

    www.browser-statistik.de

  12. E-Mail Link

    Ein E-mail Link funktioniert wie ein externes Link mit dem Befehl mailto:. Voraussetzung ist, dass die Mail des Anwenders mit dem Browser des Benutzers verknüpft ist.

     

  13. Vorlagen, Templates, Themes

    Bei einem einfachen Webauftritt mit HTML und CSS kopieren Sie für jede Webseite die HTML Vorlage bestehend aus .html Struktur  (einschließlich der Menülinks)  und .dem Verweis im Head auf das css Layout, 

  14. Doctype Deklaration, HTML Version

    Zuständig für Internet Standards ist die W3C.org

    Browser erkennen anhand der Doctype Angabe im <HEAD>, wie sie HTML-Angaben interpretieren sollen.

    Wenn Sie mit CSS arbeiten wollen, ist folgende Angabe sinnvoll:

  15. Responsive Design - HTML und CSS für mobile Geräte

    Sie können ein anderes Layout für Ihre Webseite für mobile Geräte mit folgenden Anweisungen erzeugen:

    HTML

    fügen Sie in den Head des Dokuments folgendes ein:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

    Dies setzt die Breite des mobilen Gerätes als Anzeigebreite der Webseite

    Sie können ein eigenes mobiles Stylesheet mobile.css einbinden mit

    <link rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” />

  16. Was ist was - HTML, XML, XHTML, SGML

    SGML - Standard Generalized Markup Language - komplexer und umfangreicher grundlegender ISO-Standard für elektronische Dokumente, von Runen zu technischer Dokumentation, von Patientendateien zu Musiknoten.

  17. formatierter Text

    <pre> ......</pre> formatiert Text so wie eingegeben.

  18. HTML und CSS überprüfen - Tools des w3c.org

    HTML Validator des W3C.org

     

    CSS Validator des W3C.org

  19. Javascript, DHTML, Ajax, Jquery

    Javascript ist eine clientseitige Programmiersprache, mit der Sie vor allem die Anzeige von HTML-Seiten

  20. Tabellen - Webseite zentrieren

    Achtung: HTML Layout-Tabellen gelten als veraltet und nicht barrierefrei. Webseiten sollten durch CSS positioniert werden.

  21. Elemente Positionieren mit Flexbox

    Das Eltern-Element muss im Stylesheet mit display:flex; bezeichnet werden. flex-wrap: wrap; erzeugt einen Umbruch. Als Richtung kann row oder column gesetzt werdenflex-direction: column; Die Elemente lassen sich zentrieren mit justify-content: center;

    Mehr bei https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Flexbox

    Beispiel:

  22. Links: seiteninterne Sprünge, Anker

     

    Sie können innerhalb einer Seite Ihres Webauftritts mit Links springen: Dies ist sinnvoll bei sehr langen Seiten, wenn Sie an den Anfang ein Inhaltsverzeichnis setzen

    Sie definieren zuerst den sogenannten "Anker", d.h. wohin bei Aufruf des Links gesprungen werden soll:
    <a name="hierhin">da wollen Sie hin</a>

    Anschließend können Sie Links setzen:

  23. HTML5 Audio-Dateien einbinden

  24. E-Mail Link

    Ein E-mail Link funktioniert wie ein externes Link mit dem Befehl mailto:. Voraussetzung ist, dass die Mail des Anwenders mit dem Browser verknüpft ist.

    <a href="mailto:ich@meineseite.de">Meine E-Mail-Adresse</a>

    Vom Browser unabhängige E-Mail-Funktionalität lässt sich nur mit serverseitigen Skripten erstellen, z.B. mit .cgi oder .php.

  25. Tabellen zum Kopieren

     

  26. Bilder mit Links hinzufügen

    Eine detaillierte Beschreibung des HTML-Codes zum Einfügen von Grafiken finden Sie hier:

  27. Kommentare

     

    Kommentare schaffen Übersichtlichkeit im Quelltext

    .html

  28. Musik einbinden

    Alt - ältere Browser-Versionen

    Mit den Anweisungen <bgsound> und <embed> können Sie einfach Musikdateien einbinden:

    http://de.selfhtml.org/html/dateiweit/hintergrundmusik.htm

    Allerdings funktioniert diese Lösung nicht in allen Browsern.

    Eine bessere Lösung ist es, das weit verbreitete Flash-Plugin zu verwenden z.B. mit Hilfe des "Einfachen Musicplayers für Flash" EMFF.

    Eine Beschreibung, wie das funktioniert, finden Sie hier:

  29. SVG Grafik erklärt - zum Kopieren

    <svg height="300px" width="600px">
    <!-- Größe des Grafikbereichs-->

  30. Lizenzfreie, kostenlose Geräusche und Musik

    Eine Übersicht lizenzfreier, kostenlos erhältlicher Musikstücke und Geräusche-Sammlungen finden Sie hier

    www.medienpaedagogik-praxis.de/kostenlose-medien/freie-musik

Subscribe to HTML