Verwendete Spezifikationen
Wir setzen schon seit 2014 HTML-Tags ein, die HTML5Hypertext Markup Language - Auf Esperanto: Hiperteksta Marklingvo - Eine englische Seite über den Standard ist http://www.w3.org/TR/html5/. Eine gute Erklärung in Esperanto ist auf den Seiten von Bertilow zu finden. entsprechen. Sollten Sie irgendwo ein Tag finden, welches nicht dazugehört, bitten wir um Information. Außerdem verwenden wir auf unseren Seiten CSS 2.1 und teilweise CSS3.
Grundstruktur
Für das Grundgerüst der Seite nutzen wir folgendes Schema:
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
</head>
<body>
Inhalte
</body>
</html>
Sektionen
Für die Gliederung nutzen wir:
- <div> - nicht semantisch ausgezeichneter Bereich
- HTML5-Elemente:
- <article> - Artikel
- <aside> - Seitenbereich
- <header> - für die Kopfzeile am Seitenanfang
- zweisprachige Version
Quelltext HTML <header role="banner" lang="de"> <h1>Esperanto in Mecklenburg-Vorpommern<br><span lang="eo">Esperanto en Meklenburgio-Antaŭpomerio</span></h1> <h2><strong>Internationale Sprache</strong><strong lang="eo">Internacia lingvo</strong></h2> <p><a href="#enhavo">Zum Inhalt</a><br><a href="#enhavo" lang="eo">Al la enhavo</a></p> </header> - deutsche Version
Quelltext HTML <header role="banner" lang="de"> <h1>Esperanto in Mecklenburg-Vorpommern</h1> <h2><em>Internationale Sprache</em></h2> <p><a href="#enhavo">Zum Inhalt</a></p> <form id="search" method="get" action="../serchado.php"> <p> <label for="suchbegriff">Suche:</label> <input type="text" name="q" id="suchbegriff" value="Suchbegriff" /> <input type="submit" value="Los !" /> </p> </form> </header> - Esperantoversion
Quelltext HTML <header role="banner" lang="eo"> <h1>Esperanto en Meklenburgio-Antaŭpomerio</h1> <h2><em>Internacia lingvo</em></h2> <p><a href="#enhavo">Al la enhavo</a></p> <form id="search" method="get" action="../serchado2.php"> <p> <label for="suchbegriff">Serĉi:</label> <input type="text" name="q" id="suchbegriff" value="Serĉaĵo" /> <input type="submit" value="Ek !" /> </p> </form> </header>
- zweisprachige Version
- <nav> - für die Hauptnavigation
- <footer> - für die Fußzeilen
- <p> - Absatz (wörtlich Paragraf)
- <h1> bis <h6> - Kopfzeilen
- <address> - Information über den Autoren
- <blockquote> - mehrzeilige Zitate
Listen
Für Listen verwenden wir:
- <ul> - unnummerierte Liste
- <ol> - nummerierte Liste
- <li> - Listeneintrag
Seit September 2016 nutzen wir für unnumerierte Listen folgendes:
ul {
list-style-type: none;
}
#enhavo ul li:before {
color:green;
position:relative;
left:-0.7em;
top:25%;
}
/* auf den Autorenseiten inaktiv */
#enhavo ul li:not(.icon-skype-1):before {
content:"\2605";
}
#enhavo ul ul {
padding-left:20px;
}
/* auf den Autorenseiten inaktiv */
#enhavo ul ul li:not(.icon-skype-1):before {
content:"\25C8";
}
#enhavo ul ul ul li:before {
content:"\2665";
}
RP hat solches auf der Seite http://blog.designimsinn.de/list-style-type-mit-unicode-gestalten/ gefunden, aber ein bißchen mehr Code dafür ergänzt. Deshalb sind die Symbole ja grün.
Verweise
Für Verweise nutzen wir:
- <a rel="external" href="http://tie.com"> - externer Verweis
- <a href="#tie"> - Verweis auf einen Anker auf der Seite
- <a id="tie"> - Anker auf der Seite
Bilder
Für Bilder nutzen wir schon HTML5, nämlich:
<figure>
<img src="URL zum Bild" alt="Text">
<figcaption>Beschreibung</figcaption>
</figure>
Seit dem 3. April 2016 verwendeten wir einen etwas komplexeren Kode, aber bis nun nur in den neuesten Grünen Boten:
<figure>
<picture>
<source media="(max-width: 480px)" srcset="">
<source media="(max-width: 640px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="URL al bildo" alt="Teksto">
</picture>
<figcaption>Priskribo</figcaption>
</figure>
Am 10. Juli 2016 hat RP diesen Code in folgenden geändert:
<figure>
<picture>
<source media="(max-width: 619px)" srcset="">
<source media="(max-width: 819px)" srcset="">
<source media="(max-width: 1024px)" srcset="">
<img src="URL al bildo" alt="Teksto">
</picture>
<figcaption>Priskribo</figcaption>
</figure>
Außerdem hat er das CSS etwas ergänzt:
/* Bilderpaar im Verda Informilo */
.duopo800 {
-webkit-display:flex;
display:flex;
-webkit-justify-content:space-between;
justify-content:space-between;
width:100%;
}
/* bei zu geringer Breite Bilder untereinander */
@media screen and (max-width:1718px) {
.duopo800 {
flex-direction:column;
}
} /* Ende @media */
.duopo800 figure.live,
.duopo800 figure.dekstre {
float:none;
width:810px;
}
.duopo800 figure.alta {
width:610px;
}
.duopo800 figure.largha {
height:630px;
}
/* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
@media screen and (max-width:619px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:410px;
}
.duopo800 figure.alta {
width:310px;
}
.duopo800 figure.largha {
height:330px;
}
} /* Ende @media */
@media screen and (min-width:620px) and (max-width:819px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:610px;
}
.duopo800 figure.alta {
width:460px;
}
.duopo800 figure.largha {
height:480px;
}
} /* Ende @media */
Am 11. Juli 2016 hat RP das CSS geändert, damit etwas und sehr alte Browser dieses nicht anwenden, wie folgt:
@supports (display:flex) or (-webkit-display:flex) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
float:none;
width:810px;
}
.duopo800 figure.alta {
width:610px;
}
.duopo800 figure.largha {
height:630px;
}
/* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
@media screen and (max-width:619px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:410px;
}
.duopo800 figure.alta {
width:310px;
}
.duopo800 figure.largha {
height:330px;
}
} /* Ende @media */
@media screen and (min-width:620px) and (max-width:819px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:610px;
}
.duopo800 figure.alta {
width:460px;
}
.duopo800 figure.largha {
height:480px;
}
} /* Ende @media */
} /* Ende supports */
Am 11. Juli nachmittags hat RP erneut etwas wie folgt ergänzt:
@supports (display:flex) or (-webkit-display:flex) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
float:none;
width:810px;
}
.duopo800 figure.alta {
width:610px;
}
.duopo800 figure.largha {
height:630px;
}
/* Bei kleinerer Breite auch Breite des figure-Tags anpassen */
@media screen and (max-width:619px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:410px;
}
.duopo800 figure.alta {
width:310px;
}
.duopo800 figure.largha {
height:330px;
}
} /* Ende @media */
@media screen and (min-width:620px) and (max-width:819px) {
.duopo800 figure.live,
.duopo800 figure.dekstre {
width:610px;
}
.duopo800 figure.alta {
width:460px;
}
.duopo800 figure.largha {
height:480px;
}
.duopo800 + p.fino {
display:none;
}
} /* Ende @media */
} /* Ende supports */
Für Galerien sieht der Kode etwas komplexer aus:
<div class="galerio">
<figure><a class="grafik" href="bildo1.html"><img src="URL zum ersten Bild" width="80" height="80" alt="Text 1" /></a><figcaption>Beschreibung 1</figcaption></figure>
<figure><a class="grafik" href="bildo2.html"><img src="URL zum zweiten Bild" width="80" height="80" alt="Text 2" /></a><figcaption>Beschreibung 2</figcaption></figure>
<figure><a class="grafik" href="bildo3.html"><img src="URL zum dritten Bild" width="80" height="80" alt="Text 3" /></a><figcaption>Beschreibung 3</figcaption></figure>
<figure><a class="grafik" href="bildo4.html"><img src="URL zum vierten Bild" width="80" height="80" alt="Text 4" /></a><figcaption>Beschreibung 4</figcaption></figure>
<figure><a class="grafik" href="bildo5.html"><img src="URL zum fünften Bild" width="80" height="80" alt="Text 5" /></a><figcaption>Beschreibung 5</figcaption></figure>
</div>
Textliches
Für textliche Inhalte nutzen wir:
- <span> - nicht semantisch ausgezeichneter textlicher Teil
- <br /> - Zeilenumbruch
- <hr /> - waagerechte Linie
Quelltexte
Seit März 2016 werden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:
<figure class="kodo">
<figcaption>Quelltext <em class="html">HTML</em></figcaption>
<pre><code> <script>
<!--
rainbow("Text",1);
//-->
</script>
</code></pre>
</figure>
Seit Dezember 2014 wurden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:
<figure class="kodo html">
<figcaption>Quelltext</figcaption>
<pre><code>
<script>
<!--
rainbow("Text",1);
//-->
</script>
</code></pre>
</figure>
Hierbei wird <figcaption> für den Hinweis auf Quelltext verwendet. Außerdem ist das Schema auf der Seite Recommendation von HTML5 beim W3C zu finden.
Bis zum 15. Dezember 2014 stand mindestens eine der Klassen css, html, js, alt oder fremd im
class-Attribut von <pre>. Dadurch sahen die ersten drei Zeilen etwas anders aus als jetzt, nämlich:
<figure class="kodo">
<figcaption>Quelltext</figcaption>
<pre class="html"><code>
Die alte Art war folgende:
<pre class="html">
<script>
<!--
rainbow("Text",1);
//-->
</script>
</pre>
Seit dem 6. Dezember 2014 werden bei Informationen über Änderungen im Quelltext die betroffenen Abschnitte farbig markiert. Hierfür wird der in HTML5 neue Tag <mark> benutzt. Die Änderungen werden dabei unterschiedlich eingefärbt, und zwar
- geänderte Abschnitte im alten Quelltext sind rot, durch
<mark class="alt">Text</mark> - geänderte Abschnitte im neuen Quelltext sind grün, durch
<mark class="neu">Text</mark> - verschobene Abschnitte werden im neuen Quelltext gelb, durch
<mark>Text</mark> - ergänzte Abschnitte werden im neuen Quelltext blau, durch
<mark class="neu2">Text</mark>
Fragen
Viele Leute haben angefragt, wie sie denn Esperantobuchstaben im Internet nutzen können.