. .

WEB DESIGN : HTML List

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Senin, Desember 26, 2016 No comments

WEB DESIGN : HTML List. Sebelum lanjutkan pembelajaran ini, perlu diketahui bacalah dulu artikel pembelajaran sebelumnya dan kuasai pengenalan pengetahuan dasar di :
WEB PROGRAMMING
Terimakasih pada sumber pembelajaran ini :
Kita dapat memasukkan daftar bullet ke halaman dengan HTML. Ada dua jenis daftar yang bisa kita gunakan: Daftar Berurutan dan Tidak Berurutan.
  • Daftar Berurutan adalah daftar menurun atau vertikal ke bawah atau horisontal kesamping yang menggunakan nomor, huruf, angka romawi, atau kombinasi (atribut).(contoh dibawah menggunakan atribut default; type="1")
  • Sebuah Daftar Tidak Berurutan daftar menurun atau vertikal ke bawah atau horisontal kesamping yang menggunakan butir/item value default (atribut) yang mengikuti perintahnya (contoh dibawah menggunakan; style="list-style-type:disc).
Contoh keduanya : 
Daftar Tidak Berurutan:
·      Butir
·      Butir
·      Butir
·      Butir

Daftar Berurutan:
1.   Butir Pertama
2.   Butir Kedua
3.   Butir Ketiga
4.   Butir Keempat

Daftar Tidak Berurutan :
CSS list-style-type properti digunakan untuk menentukan gaya item/butir sebagai daftar penanda, Berikut adalah tabel atribbutnya :
Value
Description
disc
Set item daftar penanda ke bullet/butir (default)
circle
Set item daftar penanda ke lingkaran
square
Set item daftar penanda untuk persegi
none
Daftar item tidak akan ditandai
Contoh disc Set item daftar penanda ke bullet/butir (default):
<!DOCTYPE html>
<html>
<body>

<h2>Contoh disc Set item daftar penanda ke bullet/butir (default):</h2>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
OUTPUT              :

Contoh disc Set item daftar penanda ke bullet/butir (default):

  • Coffee
  • Tea
  • Milk
Contoh circle Set item daftar penanda ke lingkaran:
<!DOCTYPE html>
<html>
<body>

<h2>Contoh circle Set item daftar penanda ke lingkaran:</h2>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
OUTPUT              :

Contoh circle Set item daftar penanda ke lingkaran:

  • Coffee
  • Tea
  • Milk
Contoh square Set item daftar penanda ke persegi :
<!DOCTYPE html>
<html>
<body>

<h2>Contoh square Set item daftar penanda ke persegi :</h2>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
OUTPUT              :

Contoh square Set item daftar penanda ke persegi:

  • Coffee
  • Tea
  • Milk
Contoh none Daftar item tidak akan ditandai :
<!DOCTYPE html>
<html>
<body>

<h2>Contoh none Daftar item tidak akan ditandai :</h2>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>
OUTPUT              :

Contoh none Daftar item tidak akan ditandai:

  • Coffee
  • Tea
  • Milk

Daftar Berurutan :
Daftar berurutan dimulai dengan <ol> tag. Setiap butir/item daftar dimulai dengan <li> tag. Daftar butir/item akan ditandai dengan nomor secara default:
<!DOCTYPE html>
<html>
<body>

<h2>Daftar Berurutan HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar Berurutan HTML list

  1. Coffee
  2. Tea
  3. Milk
Atribut daftar berurutan :
Type
Description
type="1"
Daftar item akan diberi nomor dengan angka (default)
type="A"
Daftar item akan diberi nomor dengan huruf besar
type="a"
Daftar item akan diberi nomor dengan huruf kecil
type="I"
Daftar item akan diberi nomor dengan angka romawi huruf besar
type="i"
Daftar item akan diberi nomor dengan angka romawi huruf kecil
Contoh <ol type="1">;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar item akan diberi nomor dengan angka (default)</h2>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar item akan diberi nomor dengan angka (default)

  1. Coffee
  2. Tea
  3. Milk
Contoh <ol type="A">;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar item akan diberi nomor dengan huruf besar</h2>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar item akan diberi nomor dengan huruf besar

  1. Coffee
  2. Tea
  3. Milk
Contoh <ol type="a">;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar item akan diberi nomor dengan huruf kecil</h2>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar item akan diberi nomor dengan huruf kecil

  1. Coffee
  2. Tea
  3. Milk
Contoh <ol type="I">;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar item akan diberi nomor dengan angka romawi huruf besar</h2>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar item akan diberi nomor dengan angka romawi huruf besar

  1. Coffee
  2. Tea
  3. Milk
Contoh <ol type="i">;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar item akan diberi nomor dengan angka romawi huruf kecil</h2>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

</body>
</html>
OUTPUT              :

Daftar item akan diberi nomor dengan angka romawi huruf kecil

  1. Coffee
  2. Tea
  3. Milk

Deskripsi HTML
HTML juga mendukung daftar deskripsi. Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. <dl> tag mendefinisikan daftar deskripsi, <dt> tag mendefinisikan istilah (nama), dan <dd> tag menjelaskan setiap istilah:
Contoh ;
<!DOCTYPE html>
<html>
<body>

<h2>Daftar Penjelasan/Deskripsi</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- Minum Kopi Hitam Panas</dd>
  <dt>Milk</dt>
  <dd>- Minum Susu Dingin Dengan Es</dd>
</dl>

</body>
</html>
OUTPUT              :

Daftar Penjelasan/Deskripsi

Coffee
- Minum Kopi Hitam Panas
Milk
- Minum Susu Dingin Dengan Es
Daftar HTML Nested/bersarang
Daftar dapat nested/bersarang adalah sebuah daftar didalam daftar :
<!DOCTYPE html>
<html>
<body>

<h3>Daftar HTML Nested/bersarang</h3>
<p>Daftar dapat nested/bersarang adalah sebuah daftar didalam daftar :</p>
<ul>
  <li>Coffee</li>
  <ul>
    <li>Black Coffee</li>
    <li>Espresso Cold Coffee</li>
    </ul>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
  <ul>
    <li>White Milk</li>
    <li>White Milk Ice</li>
    <li>Chocolate Milk</li>
    <li>Chocolate Milk Ice</li>
    </ul>
</ul>
OUTPUT              :

Daftar HTML Nested/bersarang

Daftar dapat nested/bersarang adalah sebuah daftar didalam daftar :
  • Coffee
    • Black Coffee
    • Espresso Cold Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
    • White Milk
    • White Milk Ice
    • Chocolate Milk
    • Chocolate Milk Ice
Daftar horisontal
Sedikit kita sisipkan fungsi CSS disini sebagai pengenalan saja, HTML List bisa ditata dalam berbagai cara dengan CSS. Salah satu cara yang populer adalah gaya daftar horizontal, untuk membuat sebuah menu header ;
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
 
    padding: 8px;
    text-decoration: none;
}

li a:hover {
    background-color: #97d7fc;
}
</style>
</head>
<body>
<ul>
  <li><a href="#home">BERANDA</a></li>
  <li><a href="#ilmu komputer">ILMU KOMPUTER</a></li>
  <li><a href="#web programming">WEB PROGRAMMING</a></li>
  <li><a href="#pengetahuan umum">PENGETAHUAN UMUM</a></li>
</ul>
</body>
</html>
OUTPUT              :


Dari pembelajaran kita ini, buka kembali file html kita sebelumnya draftwebdesign.html fungsikanlah HTML LIST kedalam program file html tersebut :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000000;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    font-size:12px; bold;
    padding: 15px;
    text-decoration: none;
}

li a:hover {
    background-color: #97d7fc;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">BERANDA</a></li>
  <li><a href="#ilmu komputer">ILMU KOMPUTER</a></li>
  <li><a href="#web programming">WEB PROGRAMMING</a></li>
  <li><a href="#pengetahuan umum">PENGETAHUAN UMUM</a></li>
</ul>
     <section>
          <article>
           <p>Mencoba <b><sub>HTML LIST</sub></b> Sembarang.<br>
           <p><b>BAKTI KEPADA ORANGTUA.</b><br>
         <li>Di dunia ini sering dijumpai anak-anak yang tidak berbakti kepada orangtuanya. Mereka sering menyalahkan orangtuanya karena mereka menganggap bahwa orangtuanya tidak memberikan cinta kasih dan perhatian yang penuh kepada mereka. Mereka selalu menuntut cinta kasih dan perhatian dari orangtuanya karena mereka menganggap bahwa cinta kasih dan perhatian itu wajib diberikan oleh orangtua kepada mereka. Mereka tidak menyadari bahwa anak yang baik seyogyanya tidak menuntut cinta kasih dan perhatian, tetapi melakukan kewajibannya dengan baik.</li>
 <li>Di dunia ini sering dijumpai anak-anak yang selalu menuntut agar orangtuanya dapat menjadi manusia yang sempurna dalam berbagai hal, seperti <b>Ariya Puggala (makhluk suci)</b>. Anak-anak selalu menuntut agar orangtuanya berkelakuan baik dan bertutur kata ramah, tanpa pernah mengoreksi dirinya sendiri. Anak-anak selalu melihat sifat-sifat buruk yang dimilikinya oleh orangtuanya, tanpa pernah menyadari bahwa orangtuanya yang belum mencapai kesucian itu masih dapat berbuat salah. Anak-anak selalu mencela dan membenci orangtuanya jika orangtuanya berbuat salah. Tanpa pernah berusaha memberitahu kesalahan orangtuanya dengan cara yang bijaksana. Anak-anak tidak pernah menyadari bahwa orangtuanya dapat berwatak keras itu sesungguhnya karena pengalaman masa lalunya. Anak-anak tidak pernah menyadari bahwa sesungguhnya tidak mudah untuk merubah sifat dan watak orangtuanya yang keras itu. Anak-anak tidak pernah menyadari bahwa jika mereka tidak dapat merubah sifat dan watak orangtuanya yang keras itu, maka seharusnyalah mereka merubah pikirannya sendiri.</il>
<li>Di dunia ini sering dijumpai anak-anak yang tidak menghormati dan tidak patuh kepada orangtuanya. Mereka sering mendelik, menentang, dan membangkang orangtuanya. Mereka datang dan pergi dari rumah tanpa memberitahukan kepada orangtuanya. Mereka pergi meninggalkan rumah pagi-pagi sekali dan kembali sampai jauh malam. Mereka tidak mengacuhkan teguran-teguran dan peringatan-peringatan yang diberikan orangtuanya.</li>
<li>Di dunia ini sering dijumpai anak-anak yang sukar dididik dan diatur. Mereka keras kepala, malas, dan dungu. Mereka tidak mempunyai keinginan untuk belajar. Mereka berteman dengan orang-orang jahat dan segera meniru kebiasaan-kebiasaan jahat tersebut. Mereka menjadi nakal, suka berkelahi, gemar berjudi, tidak perduli lagi pada moral, terjerumus dalam kehidupan seks yang salah, masuk dalam kenikmatan narkotika, ganja, dan sejenisnya. Kemudian, mereka menarik saudara-saudaranya untuk ikut berbuat jahat, sehingga menambah kesedihan orangtuanya.</li>
<li>Di dunia ini sering dijumpai anak-anak yang tidak memperdulikan kesejahteraan, kebahagiaan, dan kesehatan orangtuanya. Mereka tidak pernah menanyakan apakah orangtuanya tidak menderita panas atau dingin, lapar atau haus. Mereka tidak pernah menanyakan, apakah orangtuanya dapat tidur nyenyak dan beristirahat dengan tenang. Mereka tidak pernah menanyakan apakah orangtuanya tidak menderita sakit apapun. Mereka tidak pernah melayani orangtuanya dengan baik. Mereka tidak pernah memperhatikan kesusahan orangtuanya, Mereka tidak pernah mengetahui bahwa orangtuanya sering menangis, meratap, dan berkeluh kesah.</li>
<li> Di dunia ini sering dijumpai anak-anak yang melupakan kebaikan orangtuanya. Mereka tidak menyadari pengorbanan yang amat besar yang telah diberikan oleh orangtuanya kepada mereka. Mereka tidak tahu berterima kasih kepada orangtuanya. Mereka tidak berbakti kepada orangtuanya. Mereka tidak berusaha menghibur dan membahagiakan orangtuanya. Mereka tidak berusaha memenuhi keinginan-keinginan orangtuanya. Mereka baru menyadari tingkah lakunya sebagai anak yang tidak berbakti. Penyesalan memang selalu datang terlambat.</li>
<p>---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<p><b>Dalam kitab suci <sup>Dhammapada</sup><sub> Bab V ayat 67</sub>, Sang Buddha bersabda,</b></p>
<div style="text-align: center;">
<strong><i>“Bilamana suatu perbuatan setelah selesai dilakukan membuat seseorang menyesal, maka perbuatan itu tidak baik. Orang itu akan menerima akibat perbuatannya dengan ratap tangis dan wajah yang bergelimang air mata.”</i></strong></div>
         </article>
     </section>
</body>
</html>
OUTPUT :

Hasilnya memang belum sempurna, karena kita belum mengkaji CSS dengan baik, tapi sabar saja ikuti terus kita akan melangkah kesana, karena pada bagian berikutnya, kita akan mendapatkan pengenalan Cascading stylesheet (CSS). - Introduction to CSS -

0 komentar:

Posting Komentar