Web Page Basics

HTML

<article class="typo">
    <blockquote>Auch crossmediale CMS für Print- und Web-Publishing  sind in der Regel für die Herstellung einer Tageszeitung noch nicht überzeugend.</blockquote>
    <p>Rainer Lang, alfa Media Partner</p>

    <p><img src="https://www.paypalobjects.com/webstatic/de_DE/mktg/wright/sell_instores/sell_instores_n3_1x.jpg">
        Das Mediensystem der Zukunft besteht aus einem Redaktionssystem und einem CMS. Mit Komponenten zur <b>medienneutralen Bearbeitung</b> und Verwaltung der Information bei Trennung von Inhalt und Form (Präsentation) mit XML wird die medienspezifische Aufbereitung der Information, also die Verschmelzung von Inhalt und Präsentation, im Prozeß so weit wie möglich nach hinten geschoben. Erst ab hier steht die Verwendung unwiderruflich fest. Das zeitungstypische Artikel-Layout taugt wenig fürs Internet und HTML kann man schlecht drucken.</p>
        <p>Ein Workflow-System steuert die dynamischen Abläufe unter den spezifischen Anforderungen beim Einsatz im Print und Online-Bereich. Denn das Print-Redaktionssystem muss die flexible Zusammenarbeit sehr vieler Redakteure unter dem rigiden Diktat eines gestaffelten Produktionsplanes mit Seitenschlußterminen und einer ausgeklügelten Vollständigkeitskontrolle mit Rücksicht auf betriebsspezische Vorprodukte und Regionalausgaben unter einen Hut bringen. Langjähriges Know-how und tiefgehende praktische Erfahrungen in der Realisierung von komplexen Verlagslösungen sind für die Systementwicklung unabdingbar.</p>

    <p>Layout und Struktur der Zeitung sind Teil eines gewachsenen Kommunikationsdesigns, das den Leser durch das Informationsangebot führt. Es ist eine große Aufgabe, in den anderen Medien ein entsprechend gutes Kommunikationsdesign "auf die Beine zu stellen" und die neuen Fähigkeiten der neuen Medien nutzbringend einzubinden.</p>

</article>

CSS

html {
    font-size: 13px;
}
.typo {
    font-family: Georgia, serif, Helvetica, Tahoma, Arial;
    font-size: 1.5rem;
    line-height: 1.8rem;
}
.typo p:first-child {
    font-weight: bold;
}
blockquote {
    font-style: italic;
    padding: 0 4rem;
}
blockquote + p:before {
    content: ' — ';
}
blockquote + p {
    color: #888;
    text-align: right;
    margin-top: -1.1rem;
}
img {
    width: 220px;
    float: left;
    margin: 0 2em 1em 0;
}