Html - CSS - Javascript ---- Lernseite

Audio anbieten
Bild links, Text fließt rechts herum
Block links, Block rechts fließt
Blöcke neben - untereinander
CSS in HTML
Div-Blöcke nebeneinander
Fett
Leerzeichen geschützt
margin
Mittig
Poligon zeichnen
Spalten anlegen
Tabelle mit div
Tags
Tags im Text anzeigen
width und max-width



Projekte:

Vokabeltrainer
Uhr

Probleme - Hinweise
Audio anbieten


HTML:

<audio controls="" src="audio/TemplinM.mp3" type="audio/mp3">
     Ihr Browser kann dieses Tondokument nicht wiedergeben.
     Sie können es unter <a href="audio/kk12.mp3">diesem Link </a> abrufen.
</audio>



HTML:


     <div class="TextBlock Mi">
       <audio id="ErwPlayer" controls> </audio><br>

       <button onclick="AnderesAudio('audio/kk13.mp3')">Song 1</button>
       <button onclick="AnderesAudio('audio/kk14.mp3')">Song 2</button>
     </div>


JavaScript

function AnderesAudio(a)
{
     var player = document.getElementById('ErwPlayer');
     player.src = a;
     player.play();
}


Ein Stop Feld ist nicht im normalen Audio Player vorgesehen. Das müsste man mit Javascript realisieren.


Ohne Playerbild

control Anweisung im Tag audio weglassen. Ggf. mit display:none; ausblenden.










HTML:


     <div class="TextBlock Mi">
       <audio id="ErwPlayer"> </audio><br>

       <button onclick="AnderesAudio('audio/kk13.mp3')">Song 1</button>
       <button onclick="AnderesAudio('audio/kk14.mp3')">Song 2</button>

       <button onclick="StopAudio()">Stop</button>
     </div>


JavaScript

function AnderesAudio(a)
{
     var player = document.getElementById('ErwPlayer');
     player.src = a;
     player.play();
}

function StopAudio()
{
     const audio = document.getElementById("ErwPlayer");
     audio.pause();
// Hält die Wiedergabe an

     audio.currentTime = 0;
// Setzt die Zeit auf den Anfang zurück

}


Bild links, Text fließt rechts herum
.TextBlock {display: inline-block; line-height: 150%; padding: 5px; margin: 20px; max-width: 100%;}
.BildImTextPur {display: inline-block; float: left; padding: 0px 15px 5px 0px;}
.MWd300 {max-width: 300px;}
.TextBlock3 {padding: 10px 0px 0px 15px;}


Den ganzen Block einschließen mit TextBlock, damit der nächste Block darunter plaziert wird.

<div class="TextBlock">
   <div class="BildImTextPur MWd300">
          <img src="*.jpg" width="100%">
   </div>

   <div class="TextBlock3">
       Text hier einfügen. Dieser umfließt jetzt das Bild auf der rechten Seite und auch unten.
   </div>
</div>


Der nächste Inhalt wird unter dem Bild bzw. Text angezeigt. Deshalb auch der einschließende TextBlock.
Nun der Text, der um das Bild herum fließen soll.
Will man oben im Text eine Lücke haben, also Text weiter unten beginnend, so bitte kein <br> einfügen, sondern z.B. ein gesch. Leerzeichen + br:
&nbsp; <br>

Oder besser noch, man baut einen Textblock (TextBlock3) mit padding usw. um den Text herum.
und dann
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Immer weiter und weiter.
Block links, Block rechts fließt
Links z.B.: Inhaltsverzeichnis - rechter Block: Text fließt um den linken Block herum

css: Inhaltsverzeichnis links

.InhaltsVerz {float:left; text-align:left; width:250px; padding:10px; margin-right:10px; margin-bottom:5px; font-size:1.1em; border:solid 3px black;}


marging Hält Abstand zum Text rechts, da der Textblock rechts bis nach ganz links fließt und das Inhaltverzeichnis mit in sich einschließt.

css: Rechts, der Inhalt:

.InhaltSelbst {text-align: left; max-width: 100%;}
Blöcke neben - untereinander
Wie ein Inhaltsverzeichnis.
Im Laptop: Blöcke plazieren sich nebeneinander.
Im Handy: Blöcke sind untereinander.

css Inhaltsverzeichnis links

.TextLi {float:left; text-align:left; width:250px; padding:10px; margin-right:10px; margin-bottom:5px; font-size:1.1em; border:solid 3px black;}


marging Hält Abstand zum Text rechts, da der Textblock rechts bis nach ganz links fließt und das Inhaltverzeichnis mit in sich einschließt.

css Rechts der Inhalt:

.InhaltRe {text-align: left; max-width: 100%;}
CSS in HTML
In Style definieren

<style> .SchriftGross {font-size: 1.2em;} </style>


In HTML - Aufruf über ID (#) oder Class (.)

<div class="SchriftGross"> Text </div>




Anweisung dierekt in HTML:

<div style="font-size: 1,2em;"> Text </div>


Weitere Beispiele:

<div style = "bgcolor: #FF03AF;"> Text </div>
<span style = "color: red;"> Text </span>

Früher gab es das Font-Tag. Heute macht man es mit style.
Div-Blöcke nebeneinander / ineinander
Man muss einen Gesamtblock (ohne float) definieren und darin dann die Teilblöcke setzen.

Generell sollte man, wenn man einen Abschnitt grundlegend formatiert, diesen als div z.B. Haupfenster definieren. Darin enthalten können dann verschiedene Unterformatierungen sein - z.B. verschiedene Farben, Schriften. Hintegründe usw..

Man kann auch mit "span"-Blöcken arbeiten.

Das ist der gesamte Block.
Nun kann man da hinein verschiedene Unterblöcke setzen
.
Das ist der gesamte Block. Nun
kann man da hinein verschiedene Unterblöcke setzen.

Das ist der gesamte Block. Nun kann
man da hinein verschiedene Unterblöcke setzen.

Das ist der gesamte Block. Nun kann man
da hinein verschiedene Unterblöcke setzen.

Style

<style>
  .DivBlockGesamt {display:inline-block; color:white;
   background-color:black; padding: 15px; margin-bottom:30px;}

  .DivDiv {display:inline-block; color:#00ffff;}
</style>


HTML

<div class="DivBlockGesamt">
   Das ist der gesamte Block.
   <div class="DivDiv"> Nun kann man da hinein verschiedene Unterblöcke setzen.</div><br>
   Das ist der gesamte Block. Nun <div class="DivDiv"> kann man da hinein verschiedene Unterblöcke setzen.</div><br>
   Das ist der gesamte Block. Nun kann <div class="DivDiv"> man da hinein verschiedene Unterblöcke setzen.</div><br>
   Das ist der gesamte Block. Nun kann man <div class="DivDiv">da hinein verschiedene Unterblöcke setzen.</div>
</div>

Fett
bold

<b> und </b>

<span style="font-weight: bold;"> und </span>
Leerzeichen - geschützt
&nbsp;
margin
"margin" beschreibt den Abstand außen. Also um einen Block herum.

margin:auto;    Der Block wird mittig angezeigt.
Mittig
Aufgabe: Ein Bild oder Text mittig in einem Rahmen anordnen. Horizontal wie vertikal!!!

justify-content: center; --- vertikal
align-items: center;--- horizontal

Style:
#MitteHaupt {display: flex; justify-content: center; align-items: center; height: 350px; max-width: 700px; border: 2px solid blue; margin: 20px;}
#MitteInhalt {text-align: center;}

.BildPur {display: inline-block; padding: 5px;}
.MWd200 {max-width: 200px;}


HTML:
<div id="MitteHaupt">
    <div id="MitteInhalt">
        Das soll alles in der Mitte sein<br>
         <div class="BildPur MWd200"> <img src="bilder/HTML.jpg" width="100%"> </div>
     </div>
</div>


Egebnis:
Das soll alles in der Mitte sein

Soll auch der ganze blaue Rahmen in der Mitte sein, muss man in den Styleanweisungen bei #MitteHaupt noch margin:auto; schreiben.

Der img-Tag ist im "div-Rahmen" (class="BildPur MWd200"). Das Bild behält dann seine Größe bei kleineren Bildschirmen.
Ohne diesen "div-Rahmen" - das Bild wird kleiner bei kleineren Bildschirmen.
Poligon zeichnen
Poligon ist eine Funkion

clip-path: polygon(0% 5%, 100% 50%, 100% 75%, 0% 100%)

Die vier Zahlenpaare sind die Orte der 4 Ecken: ObenLinks - ObenRechts - UntenRechts - UntenLinks
Es wird immer von oben nach unten gemessen und von links nach rechts.
Erste Zahl ist Abstand von links. Zweite Zahl ist Abstand von oben.

Beispiel:
#KonischesFeld {width: 500px; height: 150px; clip-path: polygon(0% 5%, 100% 50%, 100% 75%, 0% 100%);}
Spalten
Beispiel: Eine Aufzählung von Links soll sich in Spalten sortieren, entweder fest oder je nach Seitenbreite maximale Auslastung (Siehe Elektronikseite)

#InSpaltenAnordnen {column-width: 150px; columns: 3; column-gap: 2em; border: 1px solid gray;}


Lässt man columns: 3; weg, dann zeigt es so viele Spalten an, wie Platz auf der Seite ist.

HTML:

<div id="InSpaltenAnordnen">
Hallo<br> ja dann<br> bis<br> später<br> ihr<br> alten
</div>


wird zu

Hallo
ja dann
bis
später
ihr
alten


Ohne Anzahl der Spalten anzugeben:

Hallo
ja dann
bis
später
ihr
alten
Tabelle mit div
Spalten richten sich nach Textbreite:

Style:

.LernTabelle {display: table; width: 300px; border-collapse: collapse;} collapse = Abstände zwischen Zellen aufheben. max-width geht nicht, nur width allein.
   .LernZeile {display: table-row;}
   .LernKopf { background-color: #f4f4f4; font-weight: bold;} ErwKopf = Zusatz, um z.B. oberste Zeile anders zu gestalten
      .LernZelle {display: table-cell; padding: 7px; border: 1px solid #ddd;}


HTML:

<div class="LernTabelle">
   
<div class="LernZeile LernKopf">

<div class="LernZelle"> Nr </div>
<div class="LernZelle"> Objekt </div>
<div class="LernZelle"> NoteNr </div>
   
</div>

    <div class="LernZeile">
<div class="LernZelle"> 12 </div>
<div class="LernZelle"> ReglerAtt </div>
<div class="LernZelle"> 64 </div>
    </div>

    (... ggf. weitere Zeilen ...)

</div">


Ergebnis

Nr
Objekt
NoteNr
12
ReglerAtt
64


Spalten individuell:

Zelle1,2 und 3 für jede Zeile oder auch nur für die erste Zeile definieren.
Dann aber kann man nicht über die Zeilen formatieren wie Text in der Mitte usw.

ACHTUNG: Keine Angabe zur Breite der Tabelle machen.

Style

.LernTabelleB {display: table; border-collapse: collapse;}
   .LernZeileB {display: table-row;}
   .LernKopfB { background-color: #f4f4f4; font-weight: bold;}
      .LernZelle1 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 10px;}
      .LernZelle2 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 20px;}
      .LernZelle3 {display: table-cell; padding: 7px; border: 1px solid #ddd; width: 700px; text-align: center;}


HTML:

<div class="LernTabelleB">
    <div class="LernZeileB LernKopf">
<div class="LernZelle1"> Nr </div>
<div class="LernZelle2"> Objekt </div>
<div class="LernZelle3"> NoteNr </div>
    </div>
    <div class="LernZeile">
<div class="LernZelle1"> 12 </div>
<div class="LernZelle2"> ReglerAtt </div>
<div class="LernZelle3"> 64 </div>
    </div>

    (... ggf. weitere Zeilen ...)

</div">


Ergebnis

Nr
Objekt
NoteNr
12
ReglerAtt
64
Tags
<b>, <i>, <u> --- fett, kursiv, unterstrichen.
<div> --- erzeugt neuen Absatz, wenn nicht durch display: inline-block o.a. definiert.
<span> --- Inline-Objekt. Erzeugt keinen neuen Absatz. Ist für schnelle Formatierung im HTML-Text ganz gut.
Tags im Text anzeigen
Für das Größerals- und Kleineralszeichen gibt es Schreibweisen, die dann diese Zeichen anzeigen, ohne sie auszuführen.

< = &lt;
> = &gt;
& = &amp;

Auch die Tags < pre > und < /pre > , sowie < code > und < /code > ausprobieren. Die Größerals- und Kleineralszeichen müssen aber auch da weiterhin mit &lt und &gt geschrieben werden.
width / max-width
Achtung: max-width NICHT mit Prozent angeben. Funktioniert nicht.
Wenn %, dann nur width ohne max. Also max-width nur mit px.

Beispiel:
width: 95%;
und
max-width: 500px;
Probleme - Hinweise
Problem
Fehler
Lösung
Bilder ordnen sich
nicht nebeneinander an
padding mit Prozentangabe.
Wenn in den Styles z.B. steht: padding: 20px 1% 30px 1%; tritt das Problem auf.
Scheinbar blockiert jedes Bild den "Nachbarraum" ???.
Also padding mit px angeben, z.B. padding: 10px;
Es ist nicht nötig, float: left; anzugeben,
noch muss man display: inline-block; weglassen.
Objekte ordnen sich nicht darunter, sondern seitlich an
Im vorhergehenden Block: max-width = 100%
Prozentangabe bei max-width !!!
max-width kann nur mit px angegeben werden. Wenn Prozent, dann width = 100% (ohne max).