Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Wednesday, April 15, 2015

Tutorial Cara Membuat List Dalam HTML | HTML Dasar

Flamingosolution.com | Lanjutan kali ini yaitu tentang Cara membuat Daftar/ List dalam HTML Sederhana. Adapun teman teman sekalian yang belum membaca ulasan sebelumnya, karena sebelum sampai pada Tahap ini Blog telah mengulas topik terdahulu yang juga bisa di lihat dibawah ini yaitu tentang ;

Maka untuk itu kita akan mengulas tentang Judul Kali ini yaitu HTML List :

List dalam HTML atau HTML LIST ialah sebuat daftar dari beberapa item dalam sebuah menu pilihan.
jadi misalkan contoh dalam daftar menu makanan, Biasanya kita melihat daftar menu makanan ditulis dengan beberapa item yang tertera didalamnya seperti ini ;
Menu Makanan
1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie
4. Pangsit.
 dll.
Nah daftar seperti diatas lah yang termasuk sebuah List, jika dalam HTML kita juga pasti akan menemukan hal serupa dan pasti akan memakai untuk penerapannya..

HTML List terbagi menjadi 3 yaitu :
1. Ordered Lists
2. Unordered Lists
3. Defenition Lists



1. Ordered Lists
Yaitu suatu metode perintah dalam Html yang berfungsi dapat mengurutkan daftar dengan menggunakan angka biasa, angka romawi abjad.
contoh :

Daftar Penjualan
a. Sembako
b. Gas Elpiji
c. Rokok dll
Dalam Ordered List. "Tag" yang dipakai untuk pengurutan itu adalah Tag <ol>, Sedangkan tag untuk membuat daftar item nya ialah <li>.
Sehingga dalam segi penerapan Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ol>).
Lebih jelasnya lihat penerapan dibawah ini :
<body>
      <ol> Menu Makanan
          <li>Nasi Goreng</li>
           <li>Mie Goreng</li>
          <li>Ifo Mie</li>
          <li>dll</li>
      </ol>
</body>
hasil pada Browser akan kamu temui sama seperti contoh dibawah ini ;
Menu Makanan 
1. Nasi Goreng
2. Mie Goreng
3. Ifo Mie dll
Atau list bisa juga digunakan dalam penggunaan tag judul  seperti dibawah ini:
<h3>Numbered List:</h3>
  <ol>
     <li>apples</li>
     <li>bananas</li>
     <li>Lemon</li>
     <li>orange</li>
 </ol>
Hasilnya

Numbered List:

  1. apples
  2. bananas
  3. Lemon
  4. orange
Berdasarkan gambar tersebut, bisa disimpulkan bahwa tag <li> dapat berfungsi langsung mengurutkan daftar daftar tersebut langsung menggunakan angka sebagai simbol.

2. Unordered Lists
Sedangkan yang satu ini ialah metode dalam HTML yang mengurutkan daftar dengan menggunakan simbol atau special character.
Spesifikasi Laptop
- CPU Intel Dual core processor (1.9 GHz)
- Ram 4 GB
- Harddisk 500 GB dll

Sedangkan dalam Unordered List"Tag" yang dipakai untuk pengurutan itu adalah Tag <ul>, Sedangkan tag untuk membuat daftar item tetap menggunakan tag <li>.
Dan dalam penerapan, Tag item ( <li> ) diapit atau berada diantara tag pengurut (<ul>).
Lebih jelasnya lihat penerapan dibawah ini
 <body>
     <ul>Spesifikasi Smartphone
         <li>Layar 5.5 In </li>
         <li>Jaringan 3G, EDGE</li>
         <li>Memory Internal (MicroSD)</li>
         <li>dll</li>
     </ul>
</body>
dalam Browser hasilnya akan terlihat seperti dibawah ini;
Spesifikasi Smarphone
  • Layar 5.5 In
  • Jaringan 3G, EDGE
  • Memory Internal (MicroSD) dll

Nah , jadi perbedaan antara Ordered dan Unordered bisa dilihat dari jenis lambang lambang yang digunakan dalam pengurutannya.

3. Defenition Lists
Adalah sebuah pengurutan dalam html yang diurutkan berdasarkan daftar daftar defenisi atai istilah.
Jenis ini berfungsi/ digunakan saatmembuat daftar defenisi atau menggunakan istilah istilah yang ada dalam dokumen , terutama membuat Glosarium HTML.
Dengan kata lain, jenis ini digunakaan disaat kita ingin memberi Indeks Tersendiri.

Tag yang dipakai dalam bentuk ini adalah;
Tag <dl> (sebagai pengurut)
Tag <dt> (Sebagai Pembuat Defenisi/istilah)
Tag <dd> (Sebagai isi/ istilah)

Dalam penerapan Tag <dd> haruslah diapit atau berada dalam Tag <dt> , dan Tag <dd> harus berada atau diapit oleh Tag <dl>.
Sebagai contoh lihat penerapan dibawah ini ;
<body>
    <dl>
       <dt>Kopi</dt>
           <dd>Kopi Hitam Panas</dd>
       <dt>Susu</dt>
           <dd>Susu Putih Panas</dd>
   </dl> 

</body>

Maka dalam browser akan terlihat seperti dibawah ini :
Kopi
Kopi Hitam Panas
Susu
Susu Putih Panas
--------------------------------------------------------------------------------------------------------------------

ATTRIBUT dalam List
Tak sampai disitu, dalam Tag list ada juga saat saat dibutuhkannya penggunaan attribut,

Berikut Contoh penggunaan attribut dalam tag ordered list sebeagai abjad, yang ditandai kode "Biru" seperti dibawah ini :

<h4>Letters Lists: </h4>
<ol type ="A">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
 hasilnya

Letters Lists:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Maka Kesimpulannya Attribut (warna Biru) tersebut berfungsi untuk menampilkan pengurutan berdasarkan abjad (Ordered List) tersebut menjadi abjad Kapital.
Namun jika pada Attribut ditulis seperti ini Type="a" , maka pengurutan abjad akan kembali ke huruf kecil.

Dan berikut contoh penggunaan attribut dalam tag Unordered list sebeagai Angka Romawi, yang ditandai kode "Biru" seperti dibawah ini :

<h4>Roman Number List: </h4>
<ol type ="I">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
Hasil dalam browser seperti dibawah
Roman Number List:
  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges
Namun jika mengubah attribut Type menjadi type="i" ,maka secara otomatis juga pengurutan unordered list berdasarkan romawi kecil, seperti dibawah ini
<h4>Roman Number List: </h4>
<ol type ="i">
       <li>Apples</li>
       <li>Bananas</li>
       <li>Lemons</li>
       <li>Oranges</li>
</ol>
hasilnya

Roman Number List:

  1. Apples
  2. Bananas
  3. Lemons
  4. Oranges

Sekian pembahasan topik kali ini, semoga bermanfaat dan dapat menambah refrensi.
Jangan lupa Klik Like Facebook, atau bagikan Link ke teman anda yang ingin belajar HTML,
Jika ada sesuatu dalam artikel yang kurang dipamahi, atau kesalahan, silahkan meninggalkan pertanyaan atau saran dalam kotak komentar.

Terima kasih,

Salam.






Monday, April 13, 2015

Cara membuat Link di HTML | HTML Dasar

Flamingosolution.com | Berikut pembahasan lanjutan dari HTML Dasar yaitu "Cara membuat Link di HTML Dasar", jika sebelumnya blog telah memuat artikel tentang tahap -tahap awal HTML Dasar,
atau bisa dilihat halaman yang telah dimuat sebelumnya dibawah ini :

Maka selanjutnya seperti diatas tadi kita akan melanjutkan membahas cara membuat link dalam HTML Dasar.

LINK adalah suatu alamat dalam kode HTML yang ditulis/dimasukkan dalam HTML dengan tujuan untuk menghubungkan suatu halaman ke halaman lain.
Tentu sebelum membuat link, kita harus menyediakan beberapa file Html dalam drive/ penyimpanan kita, agar nantinya tujuan dari link itu sendiri dapat berjalan sesuai keinginan (Menghubungkan antar halaman)

Contoh atau bentuk tag yang digunakan untuk membuat link dalam sebuah HTML ialah;
NB : Ditulis dalam Body
<body>

<a href ="halaman_b.html"> Klik untuk halaman kedua </a>

</body>

Berikut penjelasan kode diatas;
- Kode merah <a href ="  ">    </a> adalah mutlak bentuk dari sebuah tag LINK.

- Kode  biru (halaman_b.html)adalah sebuah alamat dari suatu halaman di html, seperti contoh halaman google
 
- Sedangkan tulisan hitam "Klik untuk halaman kedua" adalah tulisan dari link yang akan kita tampilkan sebagai link tersebut. (sebagai penanda/ atau tulisan yang akan kita klik).

Selanjutnya, Misalkan  sebuah file dari "halaman tujuan" itu berada di folder lain dalam Drive penyimpanan kita, maka kita harus menambahkan sebuah SUB FOLDER di depan alamat dari link (Warna biru diatas).
dengan cara menambahkan "nama folder/ " pada awalan alamat tujuan dari link.

Contohnya : 
 <a href ="folderhtml/halaman_b.html"> Klik untuk halaman kedua </a>

Maka bisa dilihat kode warna Coklat diatas merupakan sub folder dari html tujuan kita, jika misalkan file nya berbeda dengan file yang dibentuk bersama link.


Namun suatu "HTML Link" bukanlah hal yang mengharuskan dalam penggunaan antar file/ halaman yang berbeda, tapi dalam file atau halaman yang sama juga dapat beroperasi.
Seperti contoh yang kerap kita temui adalah Tombol (Back to Top) / tombol kembali ke halaman atas.

Tombol (Back to Top) atau Kembali ke atas berlaku apa bila suatu halaman dalam html memiliki konten/ tampilan isi yang banyak sehingga memungkinkan kita untuk melakukan "Scroll Down" kebawah.
Sehingga dibuatlah sebuah link untuk memudahkan akses langsung kembali ke atas tanpa melakukan "Scroll Up"

Untuk membuat link dalam halaman yang sama (Back to Top) ;
Misalkan kita akan membuat Beberapa Judul dalam konten isi/ <body> , mungkin banyak, tujuannya agar nantinya kita dapat melakukan scroll kebawahseperti berikut ini;

<body>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
    <h1> Judul Teratas</h1>
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2>
        <h2> Judul tengah </h2>
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2> 
        <h2> Judul tengah </h2>
        <h2> Judul tengah </h2>
            <h3> Judul Tengah </h3>
            <h3> Judul Tengah </h3> 
             <h3> Judul Tengah </h3>  
             <h3> Judul Tengah </h3> 
             <h3> Judul Tengah </h3> 
 </body>

Kode diatas hanyalah akan menampilkan judul biasa.
Tujuan kita ialah membuat isi agar dapat discroll yaitu dengan memperbanyak isi dengan judul, apabila sudah bisa di scroll.

Selanjutnya kita akan menambah fungsi dengan Tag dan attribut ke dalam "Judul Teratas" yang nantinya akan dipanggil jika kita menekan Link yang ada dibawah, yaitu link #kembali keatas.
Pertama langsung saja berikut cara dan contohnya tampilannya, dibawah ini ;

<body>
    <a name="Kembalikeatas"><h1> Judul Teratas</h1>
     <h1> Judul Teratas</h1>
     <h1> Judul Teratas</h1>
     <h1> Judul Teratas</h1></a>
      <h2> judul tengah<h2>
      <h2> judul tengah<h2>
      <h2> judul tengah<h2>
      <h3> judul tengah<h3>
      <h3> judul tengah<h3>
      <h3> judul tengah<h3>
      <h3> judul tengah<h3>
      <h3> Judul Bawah<h3>   
      <h3> Judul Bawah<h3>
      <h3> Judul Bawah<h3>
      <h3> judul tengah<h3>
      <h3> judul tengah<h3>
      <h3> Judul Bawah<h3>   
      <h3> Judul Bawah<h3>
      <h3> Judul Bawah<h3>
      <h3> Judul Bawah<h3>      <h3> Judul Bawah<h3>
      <h3> Judul Bawah<h3>
      <h3> Judul Bawah<h3>      <h3> Judul Bawah<h3>      <h3> Judul Bawah<h
<a href="#kembalikeatas"> Klik untuk Kembali Keatas </a>
</body>

Penjelasannya seperti berikut ;
1. Tambahkan sebuah fungsi yang akan dipanggil di link dengan cara mengapit <h1> dengan mengawali tag
<a>  dan ditutup diakhiran </h1> dengan </a>
2. Lalu dalam Tag <a> tambah attribut name="kembalikeatas" yaitu sebagai fungsi yang akan dipanggil di link.
3. Kemudian Panggil di akhiran (diatas </body>) fungsi nomor 2 tersebut dengan membuat "link" seperti ini":
<a href="#kembalikeatas"> Klik untuk Kembali Keatas </a>

NB : Mengapa dalam dalam Tag Link attribut alamat "href="#Kembalikeatas"> memakai tanda (#)???
Karena tanda # dalam alamat berfungsi memanggil attribut yang telah dimasukkan dalam tag pembuka di judul teratas atau <h1>
Saya rasa Teman teman sekalian dapat memahami dengan seksama, silahkan diperhatikan/diulang langkah langkah diatas apabila linknya tidak berjalan lancar.
Sekian Ulasan diakhiri, apabila ada yang kurang jelas, silahkan untuk meninggalkan komentar dibawah.
Jangan lupa Klik like, atau bagikan ke teman teman yang lain apabila hendak ingin belajar HTML.
Terima kasih
Baca pula Artikel Terkait :

 

© 2013-2019 Flamingo Solution. All rights resevered. Designed by Templateism

Back To Top