Sie sind auf Seite 1von 5

Markierungen mit Farbfeldern- in HTML eingeben

<div class="alert alert-info">hellblau</div>

<div class="alert alert-danger">rosa</div>

<div class="alert alert-success">hellgrün</div>

<div class="alert alert-warning">hellgelb</div>

 HERVORHEBUNG 1
Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni

Quelltext für obige Ansicht:


<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FFDC00;">
<div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-
bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid #AAA;">  <img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Icon-Megaphone.svg/
140px-Icon-Megaphone.svg.png" alt="" role="presentation" width="31"
height="26">&nbsp;HERVORHEBUNG 1</div>  <div style="padding-bottom: .5rem; font-
size: large;"> Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div> </div><br>

 HERVORHEBUNG 2 - Wichtigere
Sachen
Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF4136;">
<div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-
bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid #AAA;"> <img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Icon-Megaphone.svg/
140px-Icon-Megaphone.svg.png" alt="" role="presentation" width="31"
height="26">&nbsp;HERVORHEBUNG 2</div> <div style="padding-bottom: .5rem; font-
size: large;">
Hier steht der Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div> </div> </div><br>

 AUFGABE - Ãœberschrift
Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #2ECC70;">
<div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-
bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid #AAA;"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Icon-Stift.svg/126px-
Icon-Stift.svg.png" alt="" role="presentation" width="28" height="28">&nbsp;AUFGABE -
Ãœberschrift</div> <div style="padding-bottom: .5rem; font-size: large;">Hier steht der
Inhalt mit allen möglichen Infos ... Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In eni </div> </div> </div><br>

  AKTIVITÄT (PFLICHT) - Titel


Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF851B;">
<div style="padding: 0 1rem;"> <div style="font-size: x-large; font-weight:bold; margin-
bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid #AAA;"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Icon-Kompass.svg/137px-
Icon-Kompass.svg.png" alt="" role="presentation" width="30"
height="30"> &nbsp;LERNPFAD - Titel des Experimentes 2</div> <div style="padding-
bottom: .5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div>
</div> </div><br>
 Die AKTIVITÄT ist damit beendet
Wenn du alle Informationen verstanden, die Aufgaben
erfolgreich bearbeitet und keine Fragen mehr hast, dann
kannst du das Aktivitäts-Fenster schließen und auf der
Unterseite weiterlesen, von der du auf diese Aktivität
gekommen ist.
<br> <div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #FF851B;">
<div style="padding: 0 1rem;"> <img
src="https://superlehrer.de/wp-content/uploads/2018/11/Otto_geht.png" alt="" width="100"
height="153" role="presentation" class="atto_image_button_left"> <div style="font-size: x-
large; font-weight:bold; margin-bottom: .5rem; margin-left: 100px; padding:.75rem .25rem;
border-bottom: 1px solid #AAA;"> <img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Icon-Kompass.svg/137px-
Icon-Kompass.svg.png" alt="" role="presentation" width="30" height="30">
&nbsp;<b><i>Die AKTIVITÄT ist damit beendet</i></b></div> <div style="padding-
bottom: .5rem; font-size: large;"> <i>Wenn du alle Informationen verstanden, die Aufgaben
erfolgreich bearbeitet und keine Fragen mehr&nbsp;hast, dann kannst du das Aktivitäts-
Fenster schließen und auf der Unterseite weiterlesen, von der du auf diese Aktivität
gekommen ist.</i></div> </div> </div><br>

 EXPERIMENT - Titel des Experimentes


Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni
<br><div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid
#39CCCC;">  <div style="padding: 0 1rem;"> <div style="font-size: x-large; font-
weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid
#AAA;"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Icon-
Experiment.svg/117px-Icon-Experiment.svg.png" alt="" role="presentation" width="24"
height="32">&nbsp;EXPERIMENT - Titel des Experimentes</div><div style="padding-
bottom: .5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni
</div></div></div><br>

 LÖSUNG - zu welcher Aufgabe


Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
arcu. In eni
<br><div style="margin: 0 auto .5rem; overflow:hidden; border-left: 10px solid #7FDBFF;">
<div style="height: 100%; padding: 0 1rem;"> <div style="font-size: x-large; font-
weight:bold; margin-bottom: .5rem; padding:.75rem .25rem; border-bottom: 1px solid
#AAA;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Icon-
Stift.svg/126px-Icon-Stift.svg.png" alt="" width="28" height="28"
role="presentation">&nbsp;LÖSUNG - zu welcher Aufgabe</div> <div style="padding-
bottom: .5rem; font-size: large;">Hier steht der Inhalt mit allen möglichen Infos ... Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa
quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In eni </div>
</div> </div><br>

Das könnte Ihnen auch gefallen