Pri teknikaj detaloj

Uzataj normoj

Ni jam ekde 2014 uzas HTML-etikedojnLaŭ Sergio Prokovskij traduko por angla tag., kiuj konformas al HTML5Hypertext Markup Language - En esperanto: Hiperteksta Marklingvo - Angla paĝaro pri la normo estas http://www.w3.org/TR/html5/. Bona klarigo en esperanto troviĝas sur la paĝaro de Bertilow.. Se vi trovus iujn etikedojn, kiuj ne normas, ni petas pri informo. Krome ni uzas sur nia paĝaro CSS 2.1 kaj jam parte CSS3.

Baza strukturo

Por la baza strukturo de la paĝaro ni uzas la sekvan skemon:

Fontoteksto HTML
<!DOCTYPE html>
<html>
<head>
      <title>Titolo</title>
</head>
<body>
      Enhavo
</body>
</html>

Sekcioj

Por la erigo ni uzas:

Listoj

Por listoj ni uzas:

Ekde septembro 2016 ni uzas por nenumeritaj listoj la jenon:

Fontoteksto CSS
                   ul {
                                        list-style-type: none;
                                        }
           #enhavo ul li:before  {
                                        content:"\2605";
                                        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 trovis ion tian sur la paĝo http://blog.designimsinn.de/list-style-type-mit-unicode-gestalten/, sed aldonis iom pli da kodo por tio. Tial la simboloj estas ja verdaj.

Ligiloj

Por ligiloj ni uzas:

Bildoj

Por bildoj ni uzas jam HTML5, nome:

Fontoteksto HTML
<figure>
 <img src="URL al bildo" alt="Teksto">
 <figcaption>Priskribo</figcaption>
</figure>

Ekde la 3-a aprilo 2016 ni uzis iom pli kompleksan kodon, sed ĝis nun nur en la plej novaj Verdaj Informiloj:

Fontoteksto 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>

La 10-an de julio 2016 RP iomete ŝanĝis tiun kodon al:

Fontoteksto 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>

Krome li iomete aldonis iom da CSS jene:

Fontoteksto 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 */

La 11-an de julio 2016 RP denove ŝanĝis CSS, por ke iomete kaj tre malnovaj foliumiloj ne uzu tion jene:

Fontoteksto 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 */

La 11-an de julio posttagmeze RP denove ion aldonis jene:

Fontoteksto 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 */

Por bildaroj la kodo aspektas iomete pli kompleksa:

Fontoteksto HTML
<div class="galerio">
<figure><a class="grafik" href="bildo1.html"><img src="URL al la unua bildo" width="80" height="80"  alt="Teksto 1" /></a><figcaption>Priskribo 1</figcaption></figure>
<figure><a class="grafik" href="bildo2.html"><img src="URL al la dua bildo" width="80" height="80"  alt="Teksto 2" /></a><figcaption>Priskribo 2</figcaption></figure>
<figure><a class="grafik" href="bildo3.html"><img src="URL al la tria bildo" width="80" height="80"  alt="Teksto 3" /></a><figcaption>Priskribo 3</figcaption></figure>
<figure><a class="grafik" href="bildo4.html"><img src="URL al la kvara bildo" width="80" height="80"  alt="Teksto 4" /></a><figcaption>Priskribo 4</figcaption></figure>
<figure><a class="grafik" href="bildo5.html"><img src="URL al la kvina bildo" width="80" height="80"  alt="Teksto 5" /></a><figcaption>Priskribo 5</figcaption></figure>
</div>

Tekstaĵo

Por tekstaj enhavoj ni uzas:

Fontotekstoj

Ekde marto 2016 ĉitieaj fontotekstoj estas aranĝataj jene:

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

Ekde decembro 2014 ĉitieaj fontotekstoj estis aranĝataj jene:

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

Ĉe tio la <figcaption> estas uzata por la indiko pri fontoteksto. Krome la skemo troviĝas en la Rekomendo de HTML5 ĉe W3C. Ĝis la 15-a de Decembro 2014 staris almenaŭ unu el la klasoj css, html, js, altfremd en la class-atributo de <pre>. Tiel la unuaj tri linioj aspektis iomete alie ol nun, nome:

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

La malnova maniero estis la jena:

Fontoteksto HTML
<pre class="html">
 &lt;script&gt;
 &lt;!--
 rainbow("teksto",1);
 //--&gt;
 &lt;/script&gt;
</pre>

Ekde la 6-a de Decembro 2014 ĉe informoj pri ŝanĝoj en la fontoteksto la koncernaj partoj estas markataj kolore. Ĉe tio estas uzata en HTML5 nova etikedo <mark>. La ŝanĝoj estas malsame kolorigitaj ĉe tio, nome

Demandoj

Multaj homoj jam demandis nin, kiel kodigi en la reto la esperanto-literojn.