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:
<!DOCTYPE html>
<html>
<head>
<title>Titolo</title>
</head>
<body>
Enhavo
</body>
</html>
Sekcioj
Por la erigo ni uzas:
- <div> - ne semantike markata parto
- HTML5-elementoj:
- <article> - artikolo
- <aside> - flanka parto
- <header> - por la kaplinio je la paĝa komenco
- dulingva versio
Fontoteksto 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> - germana versio
Fontoteksto 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> - esperanta versio
Fontoteksto 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>
- dulingva versio
- <nav> - por la ĉefa navigejo
- <footer> - por la piedlinioj
- <p> - alineo (laŭvorte paragrafo)
- <h1> ĝis <h6> - kaplinioj
- <address> - informo pri la aŭtoro
- <blockquote> - plurlinia citaĵo
Listoj
Por listoj ni uzas:
- <ul> - nenumerita listo
- <ol> - numerita listo
- <li> - listero
Ekde septembro 2016 ni uzas por nenumeritaj listoj la jenon:
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:
- <a rel="external" href="http://tie.com"> - ekstera ligilo
- <a href="#tie"> - ligilo al ankro enpaĝa
- <a id="tie"> - ankro enpaĝa
Bildoj
Por bildoj ni uzas jam HTML5, nome:
<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:
<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:
<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:
/* 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:
@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:
@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:
<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:
- <span> - ne semantike markata teksta parto
- <br /> - linisalto
- <hr /> - horizontala linio
Fontotekstoj
Ekde marto 2016 ĉitieaj fontotekstoj estas aranĝataj jene:
<figure class="kodo">
<figcaption>Fontoteksto <em class="html">HTML</em></figcaption>
<pre><code> <script>
<!--
rainbow("teksto",1);
//-->
</script>
</code></pre>
</figure>
Ekde decembro 2014 ĉitieaj fontotekstoj estis aranĝataj jene:
<figure class="kodo html">
<figcaption>Fontoteksto</figcaption>
<pre><code>
<script>
<!--
rainbow("teksto",1);
//-->
</script>
</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, alt aŭ fremd en la
class-atributo de <pre>. Tiel la unuaj tri linioj aspektis iomete alie ol nun, nome:
<figure class="kodo">
<figcaption>Fontoteksto</figcaption>
<pre class="html"><code>
La malnova maniero estis la jena:
<pre class="html">
<script>
<!--
rainbow("teksto",1);
//-->
</script>
</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
- ŝanĝitaj partoj en la malnova fontoteksto estas ruĝaj, per
<mark class="alt">Teksto</mark> - ŝanĝitaj partoj en la nova fontoteksto estas verdaj, per
<mark class="neu">Teksto</mark> - alilokitaj partoj fariĝas en la nova fontoteksto flavaj, per
<mark>Teksto</mark> - aldonitaj partoj fariĝas en la nova fontoteksto bluaj, per
<mark class="neu2">Teksto</mark>
Demandoj
Multaj homoj jam demandis nin, kiel kodigi en la reto la esperanto-literojn.