Wiki zum Unterricht

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
======Einfache Formatierungen======

{{youtube>AZ-5yYbrMV4}}

\\

Wie man in dem Video sehen konnte, benötigt man in HTML Formatierungsbefehle, die das Aussehen einer Seite bestimmen. Wir wollen an dieser Stelle einige einfache Formatierungsmöglichkeiten kennen lernen. Komplexere Formatierungen sind dann mit der Sprache CSS möglich. Bisher kennen wir bereits:

\\

^ Befehl ^ Wirkung ^
| ''%%&nbsp;%%'' | Leerzeichen |
| ''%%<br>%%'' oder ''%%<br />%%''| Zeilenumbruch |
| ''%%<p align="wert"> </p>%%''| Absatz, als wert kann stehen: ''%%left%%'', ''%%right%%'' oder ''%%center%%'' |

Im folgenden Quelltext werden die Befehle demonstriert:

<code html>
<!DOCTYPE html>
 
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Einfache Formatierungen</title>
</head>
<body>
    Das ist die erste &nbsp; &nbsp; Zeile.<br /><br />Das ist die dritte Zeile.
    <p align="right">Hier steht ein rechts ausgerichteter Absatz.</p>
</body>
</html>
</code>

Im folgenden werden noch einige weitere einfache Formatierungen dargestellt.

=====Weitere Formatierungen=====

^ Befehl ^ Wirkung ^
| ''%%<h1>...</h1>%%'' bis ''%%<h6>...</h6>%%''| Überschriften |
| ''%%<b>...</b>%%'' oder ''%%<strong>...</strong>%%''| halbfetter Text |
| ''%%<i>...</i>%%'' oder ''%%<em>...</em>%%''| kursiver Text |
| ''%%<del>...</del>%%''| durchgestrichener Text |
| ''%%<ins>...</ins>%%''| unterstrichener Text |
| ''%%<hr size="n">%%''| horizontale Linie der Breite ''%%n%%'' |

Formatierungen dürfen hierarchisch geschachtelt werden: \\
richtig: ''%%<b><i>...</i></b>%%'' → kursiver halbfetter Text\\
falsch: ''%%<b><i>...</b></i>%%''

=====Sonderzeichen=====

Wenn eine Internetseite nach dem neuen Standard HTML5 aufgebaut ist, sollten alle Sonderzeichen richtig interpretiert werden. Für den Fall, dass dies einmal nicht so ist, sollen hier der Vollständigkeit halber die alten Codierungen für die deutschen Umlaute und das ß dargestellt werden.

^ Zeichen ^ Codierung ^
| ä | ''%%&auml;%%'' |
| ö | ''%%&ouml;%%'' |
| ü | ''%%&uuml;%%'' |
| Ä | ''%%&Auml;%%'' |
| Ö | ''%%&Ouml;%%'' |
| Ü | ''%%&Uuml;%%'' |
| ß | ''%%&szlig;%%'' |

=====Video=====

Hier werden die beschriebenen Formatierungen nochmal in einem Video vorgestellt.

{{youtube>tlx2ea1mP48}}
=====Aufgaben=====

**Aufgabe 1**

Programmiere eine HTML-Seite entsprechend der Vorlage! (Klicke auf das Bild, um es zu vergrößern.)

{{ :html:format3.png?600 |}}

[[html:listen| >> Listen]]

<!-- ~~DISCUSSION | Hier können Fragen zum Inhalt der Seite gestellt werden. ~~ -->