Zu technischen Details

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:

Quelltext HTML
<!DOCTYPE html>
<html>
<head>
      <title>Titel</title>
</head>
<body>
      Inhalte
</body>
</html>

Sektionen

Für die Gliederung nutzen wir:

Listen

Für Listen verwenden wir:

Seit September 2016 nutzen wir für unnumerierte Listen folgendes:

Quelltext CSS
                   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:

Bilder

Für Bilder nutzen wir schon HTML5, nämlich:

Quelltext HTML
<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:

Quelltext HTML
<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:

Quelltext HTML
<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:

Quelltext CSS
                   /* 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:

Quelltext CSS
                        @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:

Quelltext CSS
                        @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:

Quelltext HTML
<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:

Quelltexte

Seit März 2016 werden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:

Quelltext HTML
<figure class="kodo">
<figcaption>Quelltext <em class="html">HTML</em></figcaption>
<pre><code> &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</code></pre>
</figure>

Seit Dezember 2014 wurden die hiesigen Quelltexte wie folgt textlich ausgezeichnet:

Quelltext HTML
<figure class="kodo html">
<figcaption>Quelltext</figcaption>
<pre><code>
 &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</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:

Quelltext HTML
<figure class="kodo">
<figcaption>Quelltext</figcaption>
<pre class="html"><code>

Die alte Art war folgende:

Quelltext HTML
<pre class="html">
 &lt;script&gt;
 &lt;!--
 rainbow("Text",1);
 //--&gt;
 &lt;/script&gt;
</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

Fragen

Viele Leute haben angefragt, wie sie denn Esperantobuchstaben im Internet nutzen können.