HTML-Befehle für Inhaltsbereich bei jQuery Mobile

Im bisherigen jQuery Mobile Kurs haben wir uns direkt auf die Seitenstruktur und den Aufbau der Steuerung und der Buttons gestürzt.

Schauen wir uns an, was wir im Inhaltsbereich mit den üblichen HTML-Befehlen machen können, wie Bilder am besten eingesetzt werden und wie wir Videos integrieren, damit diese automatisch sich an die Seitenbreite anpassen.

Für den Inhaltsbereich bewegen wir uns jeweils für die entsprechenden Seite in dem DIV mit den Attributen data-role="main" class="ui-content"

<div data-role="main" class="ui-content">
    <p>Bereich Inhalt</p>
</div>

Überschriften im Inhaltsbereich

Für Überschriften nutzen wir die üblichen HTML-Befehle <h1> bis <h6> - zur Erinnerung: das h steht für das englische Wort für Überschrift "Headline" und die Zahl für die Wichtigkeit. Die <h1> ist die wichtigste Überschrift - <h2> eine Unterüberschrift usw.

Textabsätze im Inhaltsbereich

Textabsätze werde von dem HTML-Befehl [p] umschlossen. Dadurch halten die Absätze voneinander Abstand. Die Größe des Abstandes kann über CSS beeinflusst werden (wenn das gewünscht ist).

<div data-role="main" class="ui-content">
    <h1>Überschrift 1</h1>
    
    <p>Erster Absatz mit Text</p>
    
    <h2>Unterüberschrift 2</h2>
    
    <p>Nächster Absatz mit Text</p>
    <p>Folgender Absatz mit Text</p>
</div>

Listen im Inhaltsbereich

Die typischen Listen mit <ul> bzw. <ol> und den Listenpunkten <li> werden von jQuery Mobile mit weiteren Funktionen und bessere Anzeige auf Mobilgeräten ausgestattet. Daher gibt es dafür ein eigenes Kapitel unter https://www.php-kurs.com/jquery-mobile-listen-ul-ol.htm

Tabellen im Inhaltsbereich

Ähnlich wie bei Listen wird für Tabellen von jQuery Mobile erweiterte Funktionalität den normalen HTML-Befehlen übergestülpt. Wegen den Umfangreichen Möglichkeiten auch für die Tabellen ein eigenes Kapitel unter https://www.php-kurs.com/jquery-mobile-tabellen.htm

Bilder im Inhalt integrieren

Bei Bilder, Fotos und Grafiken sollten wir immer von mobilen Geräten mit unter Umständen sehr schalen Bildschirmbreiten ausgehen. Daher ist es bei Bilder wichtig, dass diese automatisch Ihre Größe an die Bildschirmbreite anpassen.

Im ersten Schritt wird ein Bild mit den üblichen HTML-Befehlen integriert:

<img src="bilder/beispielbild.jpg" id="bild1"
      alt="auf dem Bild sieht man …">

Über CSS werden wir nun die Eigenschaft des Bildes responsive machen - sprich es soll sich automatisch an die Fensterbreite anpassen. Dazu greifen wir über die ID auf das Bild zu und geben diesem eine prozentuale Breite mit.

#bild1 {
    width: 100%;
    height: auto;
}

Im Beispiel wird für das Bild die komplette Bildschirmbreite genutzt. Die Höhe wird anhand der genutzten Breite automatisch in den richtigen Proportionen berechnet.

Wenn man Angst hat, dass das Bild zu Breit angezeigt wird, kann über CSS die max-width angegeben werden.

#bild1 {
    max-width: 600px;
    width: 100%;
    height: auto;
}

Videos im Inhalt verwenden

Hier gibt es die Standard-HTML-Befehle, um ein Video in eine Website zu integrieren:

<video id="video1" width="320" height="240"
       poster="video-standbild.jpg" autobuffer controls>
<source src="video.ogg" type="video/ogg">
<source src="video.mp4" type="video/mp4">
</video>

Die Breite des Videos kann auch über CSS beeinflusst werden:

#video1 {
    max-width: 600px;
    width: 100%;
    height: auto;
}

Weitere Informationen zum Einbinden von Videos gibt es unter:
https://www.html-seminar.de/html-5-video.htm

Möchte man ein Video von YouTube integrieren, stolpert man in der Regel über die responsible Einbindung - sprich das Video von YouTube passt sich nicht automatisch der Bildschirmbreite an. Hierfür gibt einen guten Trick, den ich unter https://www.html-seminar.de/responsive-webdesign-externe-videos-einbinden.htm beschrieben habe.