Kamis, 24 Maret 2016

Pengenalan List Pada HTML

Hallo sobat sekalian..
Pada kesempatan kali ini saya akan memberikan sedikit pengenalan tentang list pada HTML.
Kita langsung saja :

List dalam HTML adalah sebuah tag untuk mengelompokkan item-item dari suatu daftar baik secara berurutan maupun tidak berurutan yang dilengkapi dengan nomor alfabetik, nomor numerik ataupun dengan bullet. List Tag pada HTML memiliki 3 varian yaitu:

1.     Ordered List (Daftar Bernomor)  

Ordered list adalah varian dari suatu daftar yang setiap itemnya diberikan nomor. Bentuk umumnya adalah :



<ol [atribut]>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
</ol>




2.     Unordered List (Bullet)

Unordered list adalah varian dari suatu daftar yang setiap itemnya tidak diberikan nomor. Bentuk umumnya adalah :


<ul [atribut]>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
    <li>...item daftar...</li>
</ul>



3.     Definition List

Definition List cocok digunakan untuk menjelaskan suatu terminologi secara rapih dan profesional. Pada umumnya, definition list terbagi atas dua bagian item. Bagian pertama adalah label dan bagian kedua adalah penjelasan.

Definition List terdiri diapit oleh tag <DL> ... </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Bentuk umum dari definition list adalah :


<dl>
    <dt>label
<dd>keterangan</dd>
</dt>
<dt>label
<dd>keterangan</dd>
</dl>













Contoh List Pada HTML :


<H2><CENTER><FONT FACE="Comic Sans MS">PEMADAM KELAPARAN</FONT></CENTER></H2>

<OL START=1><FONT FACE="Segoe Script"><FONT SIZE=5><B>
<LI><FONT FACE="Segoe Script"><FONT SIZE=5><B>Daftar Makananan</B></FONT></FONT></LI>
</B></FONT></FONT></OL>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka ayam</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Goreng</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Kalasan</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Penyet</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Ayam Kremes</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Ikan Patin</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Patin Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sop Patin</LI></FONT>

<BR>


<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Sea Food</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Goreng Tepung Crispy</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Bakar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Udang Sambal Pete</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Cumi Goreng Tepung Crispy</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Cumi Bakar</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Tumisan</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Kangkung</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Kangkung Sea Food</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis bunga Pepaya</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Baby Buncis</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Toge</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Tumis Toge Jambal</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Sate</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Ayam</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Kambing</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Buaya</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sate Sapi</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Aneka Nasi</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Putih</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Timbel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Uduk</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Goreng Kampung</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Nasi Beras Merah</LI></FONT>

<BR>

<OL START=2><FONT FACE="Segoe Script"><FONT SIZE=5><B>
<LI><FONT FACE="Segoe Script"><FONT SIZE=5><B>Daftar Minuman</B></FONT></FONT></LI>
</B></FONT></FONT></OL>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Beer</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Guinnes Kecil</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Guinnes Besar</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Bintang Pitcher</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Carlsberg Tower</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>San Miguel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mix Max</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Soft Drink</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Aqua</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Kratingdaeng</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Pocari Sweat</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Liang Teh</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Pulpy Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mizone</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Markizza</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Frestea</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Juice</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Jambu</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Mangga</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Melon</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Semangka</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Apel</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Sirsak</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Anggur</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Alpukat</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Durian</LI></FONT>

<BR>

<LI><FONT FACE="Lucida Handwriting"><FONT SIZE=4><B>Cold Drink</B></FONT></FONT></LI>

<BR>

<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Lemon Tea</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Fresh Orange</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Lemon Squash</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Chocolate</LI></FONT>
<FONT FACE="Lucida Handwriting"><LI TYPE=CIRCLE>Chocohino</LI></FONT>

<BR>

<H2><CENTER><FONT FACE="Comic Sans MS">Selamat Menikmati</FONT></CENTER></H2>



Berikut Hasil Output nya :

PEMADAM KELAPARAN

  1. Daftar Makananan



  • Aneka ayam



  • Ayam Goreng
  • Ayam Bakar
  • Ayam Kalasan
  • Ayam Penyet
  • Ayam Kremes




  • Ikan Patin



  • Patin Bakar
  • Sop Patin




  • Aneka Sea Food



  • Udang Goreng Tepung Crispy
  • Udang Bakar
  • Udang Sambal Pete
  • Cumi Goreng Tepung Crispy
  • Cumi Bakar




  • Aneka Tumisan



  • Tumis Kangkung
  • Tumis Kangkung Sea Food
  • Tumis bunga Pepaya
  • Tumis Baby Buncis
  • Tumis Toge
  • Tumis Toge Jambal




  • Sate



  • Sate Ayam
  • Sate Kambing
  • Sate Buaya
  • Sate Sapi




  • Aneka Nasi



  • Nasi Putih
  • Nasi Timbel
  • Nasi Uduk
  • Nasi Goreng Kampung
  • Nasi Beras Merah

    1. Daftar Minuman




  • Beer



  • Guinnes Kecil
  • Guinnes Besar
  • Bintang Pitcher
  • Carlsberg Tower
  • San Miguel
  • Mix Max




  • Soft Drink



  • Aqua
  • Kratingdaeng
  • Pocari Sweat
  • Liang Teh
  • Pulpy Orange
  • Mizone
  • Markizza
  • Frestea




  • Juice



  • Jambu
  • Mangga
  • Melon
  • Orange
  • Semangka
  • Apel
  • Sirsak
  • Anggur
  • Alpukat
  • Durian




  • Cold Drink



  • Lemon Tea
  • Fresh Orange
  • Lemon Squash
  • Chocolate
  • Chocohino

  • Selamat Menikmati



    Sekian blog saya kali ini semoga bermanfaat buat sobat-sobat sekalian.

    Jumat, 18 Maret 2016

    Hidup Lah Dengan Penuh Impian

    Selasa,8 Maret 2016


    Pada kesempatan kali ini saya akan menyampaikan tentang apa-apa saja yang saya dapat kan dalam mata kuliah Pemrograman Web.

    1. Pengertian HTML

    HTML adalah adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dan untuk kepanjangan dari HTML itu sendiri adalah (Hyper Text Markup Language)

    2. Pengertian Web

    Web artinya Suatu sistem di internet yang memungkinkan siapapun agar bisa menyediakan informasi. Dengan menggunakan teknologi tersebut, informasi dapat diakses selama 24 jam dalam satuhari dan dikelola oleh mesin. Untuk mengakses informasi yang disediakan web ini, diperlukan berbagai perangkat lunak, yang disebut dengan web browser.

    3. Pengertian wabsite


    Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasidata teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkaitdimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statisapabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinyainteraktif dua arah berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik.

    4. Pengertian HTTP


    Pengertian HTTP adalah protokol request-response (permintaan dan tanggapan) antara klien dan server. Klien adalah web pengguna atau web browser, sedangkan server adalah pemberi tanggapan dengan menyimpan atau mengambil sumber daya yang diminta dengan menghubungkan tautan, yang disebut dengan dokumen hiperteks, selanjutnya membentuk World Wide Web


    5. Cara Kerja Web

    Seorang USER dan ingin membuka sebuah situs ,dalam hal ini misalnya metroNews.com dari sebuah komputer yang berada di sebuah warnet. URL atau REQUEST yang saya ketik melalui aplikasi BROWSER yang kali ini dipakai adalahMozilla firefox 3.0,maka URL/alamat yang saya tadi ingin masukkan di klik di kolom (www) atau world wide web yang merupakan sebuah arsitektur kerja untuk memasuki dokumen yang saling berhubungan. Setelah URL atau nama situs itu dimasukkan di mesin pencari (mozilla) maka akan secara otomatis "jika komputer terkoneksi"DATA/URL akan terkirim dan akan memasuki wilayah kerja TCP/IP . Disini data akan diperiksa sesuai alamat dan permintaannya, dan server akan mengambil Header/judul sebagai patokan pencarian sehingga jelas dan tidak rumit. Setelah itu Body akan di sesuaikan dan server akan memberikan data yang minta melalui alamat IP asal request tersebut jika data ada dan valid ke clientserver  sebelum akhirnya kembali lagi ke user berupa display , namun cara kerjanya tidak sesimpel itu, itu hanya sebagi perumpamaan saja.

    Demikan materi-materi yang saya dapatkan dalam mata kuliah Pemrograman Web, semoga bisa bermanfaat bagi kita semua.
    Sekian dan terima kasih