nicht angemeldet
Liebe Jenny,
Meinst du so:
das ist schonmal ein Anfang. Lass mal sehen.
<!DOCTYPE HTML>
Aha, Du verwendest HTML5. Das ist modern. Damit stehen Dir Elemente zur Verfügung, die SELFHTML (in der statischen Version 8.1.2) noch nicht erklärt. Aber das ist kein Problem.
<meta charset="utf-8">
Gut! Damit kannst Du die deutschen Sonderzeichen (äöüßÄÖÜ) unverändert im HTML-Code verwenden. Notepad++ kann Dir auch helfen, die Text-Dateien in dieser Zeichenkodierung zu speichern (aber ohne "BOM"!). Bei Fragen dazu einfach melden.
<title>Der erste Versuch</title>
<link rel="stylesheet" type="text/css" href="formate.css">
Warum nennst Du Deine CSS-Datei "formate.css"? Meiner Erfahrung nach ist es günstiger, die Datei nach dem Ausgabemedium zu benennen. Du willst doch ganz bestimmt auch ein Stylesheet für die Druckausgabe erstellen? Daher empfehle ich Dir folgenden Code:
~~~html
<link rel="stylesheet" type="text/css" media="screen, projection" href="./css/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="./css/print.css" />
Wie Du siehst, habe ich im jeweiligen <link>-Element das beabsichtigte Medium gleich mit definiert. Dazu steht im media-Attribut entsprechend, für welche Ausgabemedien welche CSS-Datei benutzt werden soll. Die Pfade habe ich meiner vorgeschlagenen Verzeichnis-Struktur entsprechend notiert.
Außerdem notiere ich diese <link>-Elemente als "selbst schließende" Elemente, damit sie XML-kompatibel sind. Du brauchst das mit HTML5 nicht.
Zum Verständnis: Selbst schließende Elemente sind solche, bei denen es kein schließendes Tag dazu gibt. Vergleiche:
<p>...</p>
<link ...>...</link>
Im zweiten Fall hätte das <link>-Element einen "Inhalt", der zwischen dem öffnenden und schließenden Tag steht. Das ist für einen Textabsatz (<p>) absolut üblich und gewollt, bei einem <link>-Element dagegen Unsinn. Gleiches gilt für <meta>, <img> und <br>.
<body>
<div id=Seite">
<ul id="Navigation">...<ul>
<div id="Inhalt">
<h1>...</h1>
...
Jetzt zur eigentlichen Struktur Deines Dokuments. Du vermischst hier Dinge, die aus unterschiedlichen "Zeitaltern" der Entwicklung des "Web" stammen.
1\. Das Element `<div id="Seite">`{:.language-html} wird inzwischen von einigen verpönt, da es eine im Grunde überflüssige Verschachtelung darstellt, die von Autoren benutzt wurde, deren CSS-Kenntnisse nicht ausreichten, um gewünschte visuelle Darstellungen zu erreichen, ohne die gesamte Seite in dieses zusätzliche "Wrapper-Div" zu verpacken. Auch die aus meiner Feder stammende Website an meiner Schule [leidet noch unter dieser Altlast](http://peutinger-gymnasium.de). Daher kannst Du dieses Element getrost eliminieren.
2\. Für eine Navigation bietet HTML5 ein eigenes Element [<nav>](http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element) an. Damit können wir diesen Abschnitt Deines Dokuments so umgestalten:
~~~html
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="...">...</a></li>
...
</ul>
</nav>
Damit ist die Navigation völlig ohne id-Attribut mit CSS gestaltbar, da sie nun mit einem eigenen Element daher kommt.
Entgegen dem Artikel über die wichtige Reihenfolge von Webinhalten finde ich keineswegs, dass die Navigation so früh im Dokument stehen muss. Wenn man sie von Fließtext "umfließen" lassen möchte, dann führt daran wohl kein Weg vorbei, aber in meinen Webseiten notiere ich sie als quasi-letztes Element (danach steht der Footer). Auf der Schulwebsite kannst Du das live in Aktion sehen.
<h2><center>Das MOND AWARD Programm </center></h2>
Das ist ein Anachronismus. Das <center>-Element hat mit der Verfügbarkeit der CSS-Technologie 1998 seine Daseinsberechtigung verloren. Wenn Du diese Unter-Überschrift unbedingt zentriert darstellen lassen möchtest, solltest Du ihr eine Klasse zuweisen. Beispiel:
<h2 class="eyecatcher">Das Mond AWARD Programm</h2>
Das englische Wort "eye catcher" bedeutet "Blickfänger". Ich habe es als Namen für die Klasse gewählt, weil es eben nichts über das später beabsichtige Aussehen verrät, sondern über den Sinn dieser Klasse. Solltest Du später andere visuelle Gestaltungen umsetzen, dann wäre ein Klassenname wie "zentriert-und-rot" plötzlich nicht mehr vernünftig. Daher versucht man die Bedeutung und nicht das Aussehen für die Benennung bei Klassen zu verwenden. - Du darfst hier natürlich auch "blickfaenger" als Klasse benutzen.
Mit einem passenden Eintrag in der CSS-Datei wird diese Überschrift dann zentriert (und rot) dargestellt:
.eyecatcher {
color: red;
text-align: center;
}
Hilft Dir diese Besprechung weiter?
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
Matthias Apsel
Gunnar Bittersmann
JürgenB