HTML-Formatparser – Quelltextbeispiel für erste Tests

Eine Vorlagen für Entwürfe

Übersicht / Seite:

HTML-Formatparser (Vorwort zur Beschreibung)
HTML-Formatparser Klasse (Das Script mit der Klasse Formatparser)
Ausgwählte Beispiele (Beispiele für Notierungen im HTML-Quelltext)
Beispiel Quelltext (Ein längeres Beispiel für erste Tests)

Neben dem beispielhaften Quelltext auf der ersten Seite dieses Tutorials, bieten wir auf dieser Seite noch ein etwas längeres Beispiel als Quelltext für eine HTML-Seite an. Die zugehörigen Images sind unterhalb des Beispiels zu finden und können für erste Tests kopiert und gespeichert werden. Beide Quelltextbeispiele bieten sich als Vorlagen für Entwürfe eigener HTML-Seiten an, die mit dem HTML-Formatparser in einem Tkinter Text-Widget formatiert ausgegeben werden können.

Zur Vermeidung unnötiger Probleme, sollten die HTML-Seiten und ebenso das Script mit dem HTML-Formatparser, als UTF-8 Dateien gespeichert werden.

Quelltextbeispiel für erste Tests (lorem-ipsum-long.html):

<!DOCTYPE html>
<html>

<head>
  <title>HTML Test</title>
  <style type="text/css">
    body {font-family:cambria; font-weight:normal; font-size:16px}
    div.wrapper{width:668px; padding:12; margin:auto}
    h1 {font-family:cambria; font-weight:bold; font-size:24px}
    h2 {font-family:cambria; font-weight:bold; font-size:20px}
    h3 {font-family:cambria; font-weight:bold; font-size:16px}
    .mittig {text-align:center}
    .bildnotizen {
      font-family:cambria;
      font-style:italic;
      font-size:10px;
      color:#867a44
      }
    .boldgrau {font-weight:bold; color:#404040}
    .boldbraun {font-weight:bold; color:#9b4c21}
    .quotes {background-color:#e6e5da; border:1px solid #ff0000}
    .zitate {
      font-family:cambria;
      font-style:italic;
      font-size:16px;
      text-align:center;
      margin:20px
    }
    @media only all and (max-width:698px) {
      div.wrapper {width:100%}
      img.images {max-width:100%; height:auto}
  </style>
</head>

<body>
  <div class="wrapper">
    <h1>Lorem ipsum</h1>
    <h2>Untertitel</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <h3>Erster Punkt</h3>
    <p><span class="boldbraun">Lorem ipsum</span> dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna  aliquyam erat,
    sed diam voluptua.</p>
    <p class="mittig">
      <img src="testbild_1.png" alt="Test" width="240" height="192" class="images"><br>
      <span class="bildnotizen">Bild 1: Notiz unterm Bild</span>
    </p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
    <br>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.</p>
    <ul>
      <li>Lorem ipsum</li>
      <li>eirmod tempor invidunt ut labore et dolore magna aliquyame irmod tempor.</li>
      <li>sed diam nonumy</li>
    </ul>
    <div class="quotes">
      <p class="zitate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua.</p>
    </div>
    <h3>Zweiter Punkt</h3>
    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
    consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
    nulla facilisi.</p>
    <p class="mittig">
      <img src="testbild_2.png" alt="Testbild 2" width="280" height="224" class="images"><br>
      <span class="bildnotizen">Bild 2: Notiz unterm Bild</span>
    </p>
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
    no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <div class="quotes">
      <p class="zitate"><strong>Lorem ipsum</strong> dolor sit amet, <u>consetetur
      sadipscing</u> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed
      diam voluptua.<br>
      At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
    invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<br>
    <br>
    <em>Stet clita kasd gubergren.<em></p>
  </div>
</body>
</html>

Diese beiden Bilder können Sie für erste Test kopieren und abspeichern.

Test
testbild_1.png

Testbild 2
testbild_2.png

Navigation

Einstieg in Python

Einführende Übersicht

OOP mit Python

Klassen und Instanzen

Vererbung und Sichtbarkeit

Codes & Tutorials

Weitere Themen

Kleines Projekt

2D-Animationen » new «
Script für animierte Bildsequenzen und Movie-Szenen.