Wikipedia:Tutorial (Berkas): Perbedaan antara revisi

 

=== Contoh 1 - Rata kanan, mengambang ===

 

<span style="color:#996633">Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus. *</span>

<span style="color:#996633">* Morbi dictum. Vestibulum adipiscing pulvinar quam. In aliquam rhoncus sem. In mi erat, sodales eget, pretium interdum, malesuada ac, augue. Aliquam sollicitudin, massa ut vestibulum posuere, massa arcu elementum purus, eget vehicula lorem metus vel libero. Sed in dui id lectus commodo elementum. Etiam rhoncus tortor. Proin a lorem. Ut nec velit. Quisque varius. Proin nonummy justo dictum sapien tincidunt iaculis. Duis lobortis pellentesque risus. Aenean ut tortor imperdiet dolor scelerisque bibendum. Fusce metus nibh, adipiscing id, ullamcorper at, consequat a, nulla.</span>

 

Kita biasanya menaruh perintah ini di awal paragraf, sehingga gambar akan mengambang di sebelah kanan paragraf. Umumnya kita melihat perintah ini di awal sebuah artikel.

 

 

<span style="color:#996633"></span>

 

 

<span style="color:#996633">* Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.</span>

 

=== Contoh 3 - Rata kiri, mengambang ===

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. *</span>

<span style="color:#996633">* Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti.

Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.

 

=== Contoh 4 - Tidak mengambang ===

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. *</span>

<span style="color:#996633">* Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.</span>

 

 

Biasanya kita ingin menambahkan judul atau keterangan pada bagian bawah gambar, untuk itu sebaiknya gambar kita beri "bingkai".

 

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla risus massa, luctus sed, sagittis ac, dapibus eu, pede. Suspendisse convallis ligula ac lorem. Quisque luctus. Mauris ut purus a libero semper sollicitudin. Integer dapibus, velit sit amet rhoncus aliquam, pede ligula cursus ante, nec elementum erat dui et mauris. Nulla quam dolor, nonummy vel, varius fermentum, suscipit ut, sapien. Pellentesque suscipit felis ac nibh. Nunc luctus hendrerit eros. Phasellus lacus. Donec non leo in sem consequat pulvinar. Curabitur ut magna vitae lectus tristique ultrices. Phasellus venenatis neque vulputate leo. Mauris quis eros.</span>

<span style="color:#996633">*Vestibulum nonummy. Nulla facilisis sapien dignissim risus. Quisque arcu urna, aliquam ac, facilisis ac, egestas non, est. Quisque neque. Donec et mi. Phasellus consequat. Integer pellentesque consectetuer lectus. Etiam malesuada eros id nibh. Fusce in tellus vitae mi auctor tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae metus.</span>

 

== Pembuatan gambar kecil (thumbnail) ==

 

 

Lihat [[Wikipedia:Keterangan_gambar|Keterangan gambar]] untuk petunjuk penulisan judul atau keterangan gambar.

 

 

Kita dapat pula mengatur besarnya ukuran thumbnail yang ingin kita lihat di layar dengan mengaturnya di [[Istimewa:Preferensi|preferansi pengguna]] pada bagian Berkas. Bila ukuran gambar asli ternyata lebih kecil dari ukuran yang kita pilih, maka ukuran asli dari gambar tersebut yang akan ditampilkan.

Secara umum bisa dikatakan penggunaan thumbnail adalah cara terbaik untuk menampilkan sebuah gambar.

 

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla risus massa, luctus sed, sagittis ac, dapibus eu, pede. Suspendisse convallis ligula ac lorem. Quisque luctus. Mauris ut purus a libero semper sollicitudin. Integer dapibus, velit sit amet rhoncus aliquam, pede ligula cursus ante, nec elementum erat dui et mauris. Nulla quam dolor, nonummy vel, varius fermentum, suscipit ut, sapien. Pellentesque suscipit felis ac nibh. Nunc luctus hendrerit eros. Phasellus lacus. Donec non leo in sem consequat pulvinar. Curabitur ut magna vitae lectus tristique ultrices. Phasellus venenatis neque vulputate leo. Mauris quis eros.</span>

 

== Mengubah ukuran ==

 

 

 

Sekarang kita ingin menampilkan gambar dengan lebar 100 piksel:

Sekarang kita ingin mencoba untuk menggabungkan beberapa contoh di atas. Katakanlah kita ingin menampilakan gambar yang rata kanan, mengambang ('''floating'''), versi kecil ('''thumbnail'''), berukuran 100 piksel, dan mempunyai judul. Kita dapat mengkombinasikan semua perintah yang sudah dicoba tadi, urutan tidak penting, kecuali nama gambar harus berada di awal dan judul gambar harus berada di akhir:

 

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis dapibus dictum purus. Cras nibh. Vivamus ante nunc, ultricies ut, fermentum at, luctus ac, felis. Suspendisse ac diam. Suspendisse lacinia congue mauris.</span>

<span style="color:#996633">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Donec varius egestas tortor. Curabitur augue leo, ullamcorper ac, tempus sed, gravida quis, felis.

Curabitur pretium malesuada dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur et urna. Cras lacus. Donec risus. Proin ornare eros ac nibh.

[http://id.wikipedia.org/w/index.php?title=Daftar_kota_di_Amerika_Serikat_menurut_jumlah_penduduk&oldid=1923745 Contoh]

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus. Nunc tristique risus pulvinar ante. Vivamus varius.</span>

<br style="clear:both;">

Masalah juga sering muncul karena ukuran gambar yang berbeda, pemecahannya adalah memisahkan gambar-gambar tersebut dengan tambahan bahasa html.

<pre>

<div style="float:right;width:315px;">

 

</div>

</pre>

 

<div style="float:right;width:315px;">

<br style="clear:all;"/>

</div>

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tellus neque, bibendum ac, accumsan eget, vestibulum a, nibh. Sed viverra urna non massa. Etiam vehicula ligula vitae nibh. Phasellus tempus auctor wisi. In consequat. Cras vel neque. Donec leo dolor, lobortis luctus, volutpat vitae, vestibulum in, eros. Maecenas porttitor, erat ullamcorper tempus faucibus, odio arcu venenatis nisl, ut cursus odio felis sed urna. Nullam ut elit vel est eleifend egestas. Ut dictum orci eu mi. Cras ultricies. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</span>

{|

|-

|}

 

{|

|-

|}

</pre>

 

Kita juga dapat menyusun dua gambar secara vertikal:

<br style="clear:both;"/>

<pre>

<br style="clear:both;"/>

</pre>

Berikut adalah cara termudah untuk meletakkan dua buah gambar menggambang di kiri dan kanan:

<pre>

</pre>

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus. Nunc tristique risus pulvinar ante. Vivamus varius.</span>

 

<pre> <br style="clear:both;"/></pre>

 

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.</span>

<br style="clear:both;">

<span style="color:#996633">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante. Mauris at ipsum vitae est lacinia tincidunt. Maecenas elit orci, gravida ut, molestie non, venenatis vel, lorem. Sed lacinia. Suspendisse potenti. Sed ultricies cursus lectus. In id magna sit amet nibh suscipit euismod. Integer enim. Donec sapien ante, accumsan ut, sodales commodo, auctor quis, lacus. Maecenas a elit lacinia urna posuere sodales. Curabitur pede pede, molestie id, blandit vitae, varius ac, purus.</span>

<br style="clear:both;">

 

Kita juga dapat membawa pengguna yang meng-klik pranala tersebut ke halaman informasi berkas (halaman yang berisi penjelasan tentang pemuat berkas, kapan, ukuran berkas, dll).

 

Perbedaan dengan perintah sebelumnya hanyalah tambahan titik dua didepan kata "Gambar"

Kita juga dapat mengganti teks pranala tersebut dengan kata-kata kita.

'''<nowiki>[[:Berkas:Wikipedesketch1.png|Halaman informasi berkas si wikipede]]</nowiki>'''

 

== Menggunakan perintah &lt;table> pada bahasa HTML ==

<table>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

<td>Teks artikel ditempatkan disini. Lorem ipsum dolor sit amet,......

</td>

</td>

<td>Teks lainnya ditempatkan disini. Lorem ipsum.....

<table>

<tr>

</td>

</td>

</td>

</td>

</tr>

<tr>

</td>

<td><span style="color:#996633">Teks artikel ditempatkan disini. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.</span>

</td>

</td>

<td><span style="color:#996633">Teks lainnya ditempatkan disini. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tellus. Donec ante dolor, iaculis nec, gravida ac, cursus in, eros. Mauris vestibulum, felis et egestas ullamcorper, purus nibh vehicula sem, eu egestas ante nisl non justo. Fusce tincidunt, lorem nec dapibus consectetuer, leo orci mollis ipsum, eget suscipit eros purus in ante.</span>