17 HTML Listaukset
https://peda.net/id/3394d15895d
2018-08-02T00:45:25+03:00
https://peda.net/:static/535/peda.net.logo.bg.svg
<div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div>
Ei järjestyksessä oleva HTML Lista
https://peda.net/id/33955b5a95d
2016-05-23T07:12:03+03:00
<p>Ei järjestyksessä oleva lista aloitetaan <strong><ul></strong> tagilla. Jokaisen listan objekti alkaa <strong><li></strong> tagilla.</p>
<p>Listan objektit merkataan pienillä mustilla pisteillä :</p>
<div class="w3-example">
<h3>Esimerkki:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span>></span></span><br/>
<span><span><</span>li<span>>Kahvi</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>>Tee</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Maito<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<h2>Epäjärjestyksessä oleva HTML Lista - Tyyli atribuutti</h2>
<p><b>Tyyli</b> atribuutti voidaan lisätä <strong>ei järjestyksessä olevaan listaan</strong>, määrittämään sen tyyli:</p>
<table class="w3-table-all notranslate">
<tbody>
<tr><th>Tyyli</th><th>Kuvaus</th></tr>
<tr>
<td>list-style-type:disc</td>
<td>Nämä tekstit tullaan merkkaamaan pisteellä (oletus)</td>
</tr>
<tr>
<td>list-style-type:circle</td>
<td>Nämä tekstit merkataan ympyrällä</td>
</tr>
<tr>
<td>list-style-type:square</td>
<td>Nämä tekstit merkataan neliöllä</td>
</tr>
<tr>
<td>list-style-type:none</td>
<td>Näitä tekstejä ei merkata</td>
</tr>
</tbody>
</table>
<div class="w3-example">
<h3>Disc:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:disc"</span></span><span>></span></span><br/>
<span><span><</span>li<span>>Kahvi</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Tee<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Maito<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>Circle:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:circle"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>Square:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:square"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>None:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:none"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
2018-08-02T00:45:25+03:00
Ei järjestyksessä oleva HTML Lista
https://peda.net/id/3396487695d
2016-05-23T07:11:59+03:00
<p>Ei järjestyksessä oleva lista aloitetaan <strong><ul></strong> tagilla. Jokaisen listan objekti alkaa <strong><li></strong> tagilla.</p>
<p>Listan objektit merkataan pienillä mustilla pisteillä :</p>
<div class="w3-example">
<h3>Esimerkki:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span>></span></span><br/>
<span><span><</span>li<span>>Kahvi</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>>Tee</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Maito<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<h2>Epäjärjestyksessä oleva HTML Lista - Tyyli atribuutti</h2>
<p><b>Tyyli</b> atribuutti voidaan lisätä <strong>ei järjestyksessä olevaan listaan</strong>, määrittämään sen tyyli:</p>
<table class="w3-table-all notranslate">
<tbody>
<tr><th>Tyyli</th><th>Kuvaus</th></tr>
<tr>
<td>list-style-type:disc</td>
<td>Nämä tekstit tullaan merkkaamaan pisteellä (oletus)</td>
</tr>
<tr>
<td>list-style-type:circle</td>
<td>Nämä tekstit merkataan ympyrällä</td>
</tr>
<tr>
<td>list-style-type:square</td>
<td>Nämä tekstit merkataan neliöllä</td>
</tr>
<tr>
<td>list-style-type:none</td>
<td>Näitä tekstejä ei merkata</td>
</tr>
</tbody>
</table>
<div class="w3-example">
<h3>Disc:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:disc"</span></span><span>></span></span><br/>
<span><span><</span>li<span>>Kahvi</span></span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Tee<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span>Maito<span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>Circle:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:circle"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>Square:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:square"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
<div class="w3-example">
<h3>None:</h3>
<div class="w3-code notranslate htmlHigh"><span><span><</span>ul<span> style<span>="list-style-type:none"</span></span><span>></span></span><br/>
<span><li>Kahvi</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Tee</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>li<span>></span></span><span>Maito</span><span><span><</span>/li<span>></span></span><br/>
<span><span><</span>/ul<span>></span></span></div>
</div>
2018-08-02T00:45:25+03:00
Esimerkki Järjestyksessä ja ei järjestyksessä olevista listoista HTML kielessä:
https://peda.net/id/3397470895d
2016-05-23T07:11:41+03:00
<div class="w3-example">
<h3>Ei järjestyksessä oleva:</h3>
<div class="w3-padding w3-white">
<div class="w3-row">
<div class="w3col w3-half">
<ul>
<li>Esine</li>
<li>Esine</li>
<li>Esine</li>
<li>Esine</li>
</ul>
</div>
<div class="w3col w3-half">
<h3>Järjestyksessä oleva lista:</h3>
<ol>
<li>1 esine</li>
<li>2 esine</li>
<li>3 esine</li>
<li>4 esine</li>
</ol>
</div>
</div>
</div>
</div>
2018-08-02T00:45:25+03:00