Belajar Membuat List Minimal

1. Pengertian  List

    List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari                langkah                  pertama                  sampai             langkah               terakhir.

2. Tipe Daftar dalam Dokumen HTML 

      Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu: 

  -Daftar berurutan (ordered list)

   Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini

 bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,… atau i, ii, iii,…).   
   Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain,  
 atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat  
 dilakukan secara acak. Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML.
   Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered  
 list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar  
 berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah 
 berakhir. Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list 
 item, yang kemudian perlu ditutup dengan tag </li>.

 Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, misalnya :
Langkah-langkah membuat dokumen HTML :
1. Jalankan aplikasi Text Editor
2. Isikan kode HTML ke dalam Text Editor
3. Simpan file dengan ekstension .htm atau .html
4. Jalankan file HTML menggunakan aplikasi Web browser untuk

    menampilkan hasilnya.

  -Daftar tidak berututan (unordered list) 

   Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya  
 secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan 
 hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat 
 (bullet),   Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan 
 tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan
 untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk 
 menandakan bahwa daftar tersebut sudah berakhir. Masing-masing item di dalam daftar harus 
 dibuat 
 menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.Adapun atribut
 untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item  berupa  
 tanda  bulatan  untuk defaultnya.

 Contoh :
  Daftar buah :
·  Mangga
·  Jambu
·  Semangka
·  Rambutan
·  Jeruk

  -Daftar definisi (definition list)

   Daftar devinisi adalah suatu daftar yang berisi kumpulan devinis dari  suatu istilah  
   tertentu, misalnya daftar istilah HTML.

 Berikut cara membuat list minimal.

  1. Jalankan aplikasi teks editor anda 
  2. Isikan kode HTML ke dalam teks editor anda seperti contoh dibawah ini.

  3. Simpan file anda dengan ekstension .html 
  4. Jalankan file HTML menggunakan aplikasi Web Browser untuk menampilkan 
      hasilnya. Dapat dilihat hasilnya di bawah ini.

Contoh bentuk tipe bullet yang berbeda sebagai berikut : 

1.    Ketikkan script berikut ke dalam text editor

2.    Kemudian disimpan (save) dengan ekstension.html

3.    Langkah selanjutnya jalankan script tersebut menggunakan internet eksplorer, maka tampilannya akan seperti ini..

Kode HTML di atas adalah contoh type unorderet list disk.

  Sekian dari saya, kurang lebihnya mohon maaf.

Atas perhatiannya, saya ucapkan terima kasih.

Membuat paragraf pada dokumen HTML

   Sebelum kalian membuat paragraf pada dokumen HTML, kalian harus mempelajarinya terlebih dahulu.
Paragraf dalam dokumen HTML dibuat menggunakan pasangan Tag <p> dan </p>. Dalam dokumen HTML, sebuah paragraf di tandai dengan baris baru dengan jarak satu spasi. Tag HTML ini disebut dengan teg format.
Berikut tabel tag HTML pemformatan teks.

Tag	Deskripsi
<b>	Mendefinisikan text tebal
<em>	Mendefinisikan text menekankan
<i>	Mendefinisikan text miring
<small>	Mendefinisikan text kecil
<strong>	Mendefinisikan text penting

   Setelah kalian mempelajarinya, marilah kita membuat teks paragraf pada dokumen HTML. Coba kalian perhatikan contoh kode HTML  di bawah ini :

1. Bukalah text Editor kalian (Notepad, Notepad ++ atau lainnya)
2. Disini saya menggunakan Notepad
3. Ketikkan atau salinlah kode di bawah ini 

         4. Jika kode HTML diatas telah dijalankan pada web browser kalian, maka hasilnya 
        akan seperti berikut. 

   Sekian  hasil latihan dari penerapan membuat teks paragraf pada HTML yang bisa saya bagikan, semoga bisa bermanfaat.   Terima kasih

CARA MEMBUAT HEADING

 MARI BELAJAR HTML...

pengertian.

     Heading atau lebih tepatnya TAG Heading merupakan TAG khusus yang disediakan oleh HTML untuk membuat sebuah judul pada teks dalam sebuah halaman web. TAG Heading secara default ditampilkan oleh browser dengan ukuran lebih besar dan lebih tebal (bold) dari teks biasa. Tidak hanya sekedar untuk memberikan penampilan yang lebih tegas dan penekanan, TAG Heading juga sangat penting dalam kaitannya dengan teknik Search Engine Optimization (SEO).
    Berikut adalah contoh membuat heading dalam kode HTML.

     Jika dari kode-kode diatas telah anda tulis, maka akan tampil di web browser seperti yang ada di bawah ini.

     
      TAG Heading dalam HTML terdiri dari 6 tingkatan berdasarkan tingkat penting dan ukurannya. TAG Heading tersebut adalah <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>. TAG H1 memiliki ukuran paling besar, sedangkan TAG h6 memiliki ukuran paling kecil.
Perlu diperhatikan bahwa walaupun TAG Heading ini memiliki ukuran yang bervariasi dan lebih tebal serta besar dari tag biasa, namun jangan gunakan TAG Heading ini hanya untuk membuat tulisan yang lebih besar. Gunakanlah TAG Heading hanya untuk membuat judul dan subjudul, bukan untuk membuat tulisan berukuran besar. Karena pada dasarnya untuk membuat tulisan besar kita bisa menggunakan CSS. Biasanya H1 hanya digunakan satu kali dalam sebuah halaman web, yaitu sebagai judul utama (judul besar). H2, H3 dan seterusnya bisa kita gunakan beberapa kali sebagai sub judul. Berikut keterangan mengenai heading dalam bentuk tabel.
     

Tabel Elemen Heading Di HTML

Elemen	Keterangan
h1	Membuat heading level 1 dengan konten tebal (bold) dan ukuran font 200% dari ukuran font dasar.
h2	Membuat heading level 2 dengan konten tebal (bold) dan ukuran font 150% dari ukuran font dasar.
h3	Membuat heading level 3 dengan konten tebal (bold) dan ukuran font 117% dari ukuran font dasar.
h4	Membuat heading level 4 dengan konten tebal (bold) dan ukuran font 100% dari ukuran font dasar.
h5	Membuat heading level 5 dengan konten tebal (bold) dan ukuran font 83% dari ukuran font dasar.
h6	Membuat heading level 6 dengan konten tebal (bold) dan ukuran font 67% dari ukuran font dasar.

Memasukkan gambar, audio, dan video di dalam aplikasi web

1. Memasukkan gambar ke dalam aplikasi web
            Dalam memasukkan gambar ke dalam halaman web, kita perlu masukkan 
     kode-kode  yang telah ditentukan.
     Berikut ini contoh listing program memasukkan gambar ke dalam aplikasi web.

    Setelah kode-kode di atas dijalankan di Internet Explorer, maka akan muncul tampilan berikut.

2. Memasukkan audio ke dalam aplikasi web
         Dalam memasukkan audio ke dalam halaman web, kita perlu masukkan 
      kode-kode  yang telah ditentukan.
      Berikut ini contoh listing program memasukkan audio ke dalam aplikasi web.

Setelah kode-kode di atas dijalankan di Mozilla Firefox, maka akan muncul tampilan berikut.

 
 3. Memasukkan video ke dalam aplikasi web

          Dalam memasukkan video ke dalam halaman web, kita perlu masukkan 
       kode-kode  yang telah ditentukan.
       Berikut ini contoh listing program memasukkan video ke dalam aplikasi web.

    Setelah kode-kode di atas dijalankan di Avast SafeZone, maka akan muncul tampilan berikut.