Kumpulan Tag Dasar dalam HTML

-

TAG STANDAR HTML

Pada postingan tentang Pemrograman Web kali ini, kita akan belajar Tag Dasar dalam HTML. Dalam Pemrograman Web ada beberapa Tag standar HTML yang sering digunakan diantaranya Heading, Paragraf, dan List. Yang pada umumnya digunakan di Body HTML dalam halaman Web. Tag standar HTML ini saya akan jabarkan di postingan ini dengan Tag sekaligus contoh dan fungsinya. Baiklah langsung saja kita mulai belajar bersama tentang Tag standar HTML berikut.

  1. Heading
    Heading adalah kumpulan kata yang menjadi Judul atau Sub Judul dalam dokumen HTML, dengan berbagai ukuran yang berbeda. Pada dasarnya untuk membuat suatu Heading, menggunakan Tag <Hx> dan </Hx> sebagai penutup Tag dengan x adalah ukuran yaitu level 1 sampai 6. Semakin tinggi level nya semakin kecil ukurannya.
    Contoh Skrip kode Heading HTML dengan hasilnya :


  2. Paragraf
    1. Formatting Paragraf
      Saat pembuatan artikel di website, pasti kita ingin menampilkan informasi-informasi yang khusus atau menekankan suatu kata atau kalimat. Maka diperlukan Tag-tag khusus diantaranya :

      TAG                          FUNGSI                                     CONTOH
      • <b>Teks</b>                   Membuat Teks Tebal (bold)                   Teks
        • 

      • <strong>Teks</strong>         Membuat Teks Penting                        Teks
        • 

      • <i>Teks</i>                   Membuat Teks Miring (italic)                Teks
        • 

      • <u>Teks</u>                   Mebuat Teks Garis Bawah (underline)         Teks
        • 

      • <s>Teks</s>                   Membuat Teks Tercoret (strikethrough)       Teks
        • 

      • <em>Teks</em>                 Membuat Teks Menekankan                     Teks
        • 

      • <mark>Teks</mark>             Membuat Teks Menandai                       Teks
        • 

      • <small>Teks</small>           Membuat Teks Kecil                          Teks
        • 

      • <del>Teks</del>               Membuat Teks Menghapus (delete)             Teks
        • 

      • <ins>Teks</ins>               Membuat Teks Meyisipkan (insert)            Teks
        • 

      • <sub>Teks</sub>               Membuat Teks  Pangkat Bawah (subscript)     Teks
        • 

      • <sup>Teks</sup>               Membuat Teks Pangkat Atas (superscript)     Teks
        •
    2. Line Break
      Saat ingin mengganti baris, pasti kita akan menekan tombol Enter tapi itu tidak berlaku dalam penulisan dokumen HTML. Seberapa banyak kita menekan tombol Enter, itu tidak berpengaruh untuk berganti baris. Maka saat akan berganti baris/line break kita harus menggunakan Tag <br> dan Tag ini tidak berpasangan, jadi tidak ada penutup Tag nya.
      Contoh Tanpa Tag <br> :
      Teks                                       TeksTeksTeks
      Teks
      Teks

      Contoh dengan Tag <br> :
      <br>Teks                                Teks
      <br>Teks                                Teks
      <br>Teks                                Teks
    3. Preformated Text
      Kita pasti ingin menampilkan dokumen web di web browser sesuai dengan di editor saat kita buat supaya di editor sama dengan di tampilan aslinya. Oleh karena itu, teks yang bersangkutan harus diberi Tag <pre> di awal teks dan ditutup dengan </pre> diakhir teks. Tag ini juga akan menjaga spasi, baris baru, dan tap seusai dengan aslinya pada saat di tampilkan di web browser.
      Contoh Tanpa Tag <pre> :
      Teks                                       TeksTeksTeks
            Teks
                  Teks

      Contoh dengan Tag <br> :
      <pre>
      Teks                                Teks
            Teks                                Teks
                  Teks                                Teks
      </pre>
    4. Mengolah Properti dari Font
      Jika kita ingin membuat pewarnaan atau jenis huruf dari font yang kita inginkan, supaya terlihat rapi atau berbeda untuk menekankan suatu teks khusus, maka kita dapat menggunakan Tag <style="property:value;">. Untuk value, ganti sesuai fungsinya masing-masing. Seperti jika color maka value diisi dengan warna-warna. Gantilah property dan value dengan atribut sebagai berikut :
              PROPERTY:VALUE               FUNGSI                        CONTOH

        

      • background-color:red           Warna Latar Belakang           Teks
        • 

      • color:green                    Warna Teks                     Teks
        • 

      • font-family:arial              Jenis Font                     Teks
        • 

      • font-size:12                   Ukuran Teks                    Teks
        • 

      • text-align:right               Perataan Teks                  Teks
        •
    5. Membuat Garis Horizontal
      Saat kita ingin membuat garis Horizontal untuk berbagai keperluan seperti memisahkan halaman web secara visual maka yang kita gunakan adalah Tag <hr>. Seperti mengolah Font, beberapa atribut yang bisa digunakan yaitu align, color, size dan width. Sama halnya dengan Tag Line Break (<br>) Tag <hr>  juga berdiri sendiri tidak ada tag penutupnya.
      Contoh Tag <hr> :
      <hr>                                                                           

      <hr size="20px">                                                     

      <hr color="red">                                                     

      <hr align="right">                                                 

      <hr width="80%"                                                   

      <hr color="red" size="20px" width="80%" align="right">     
  3. List
    List biasanya digunakan untuk menampilkan suatu kelompok menjadi satu daftar dengan urutan tertentu. Ada tiga 3 istilah List dalam HTML yaitu :
    1. List Tanpa Urutan (Unordered Lists)
      Unordered Lists dengan Tag <ul> adalah metode mengurutkan daftar dengan menggunakan simbol atau karakter khusus pada HTML atau kita sering mengenalnya dengan bullet list. Setiap List harus di awali dengan Tag <li> dan harus ditutup sesuai dengan Tag nya masing-masing.
      Contoh Tag <ul> pada daftar :
      1. Type Default "square".
        <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ul>

        Hasilnya :
        • List 1
        • List 2
        • List 3
      2. Type "disc".
        <ul type="disc">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ul>

        Hasilnya :
        • List 1
        • List 2
        • List 3
      3. Type "circle".
        <ul type="circle">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ul>

        Hasilnya :
        • List 1
        • List 2
        • List 3
      4. Type "none".
        <ul type="none">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ul>

        Hasilnya :
        • List 1
        • List 2
        • List 3
    2. List Berurut (Ordered Lists)
      Ordered List dengan Tag <ol> adalah cara mengurutkan suatu daftar dengan menggunakan angka, abjad atau angka romawi  pada HTML. Dan setiap daftar list jangan lupa menggunakan Tag <li> /list item serta selalu gunakan Tag penutupnya.
      Contoh Tag <ol> pada daftar :
      1. Type Default "1".
        <ol>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ol>

        Hasilnya :
        1. List 1
        2. List 2
        3. List 3
      2. Type "a".
        <ol type="a">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ol>

        Hasilnya :
        1. List 1
        2. List 2
        3. List 3
      3. Type "A".
        <ol type="A">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ol>

        Hasilnya :
        1. List 1
        2. List 2
        3. List 3
      4. Type "i".
        <ol type="i">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ol>

        Hasilnya :
        1. List 1
        2. List 2
        3. List 3
      5. Type "I".
        <ol type="I">
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        </ol>

        Hasilnya :
        1. List 1
        2. List 2
        3. List 3
    3. Definition List
      Definition List biasanya digunakan untuk mendefinisikan sesuatu jenis daftar. Definition List mempunyai jenis pembuka dan penutup Tag yang sangat berbeda dari yang diatas. Yaitu mempunyai 3 jenis Tag diawali dengan Definition List Tag <dl>, Definition Term dengan Tag <dt> digunakan untuk kata yang akan didefinisikan dan Definition Description / <dd> untuk penjelasan dari suatu istilah.
      Contoh Tag Definition List pada daftar :
      <dl>
      <dt>      Istilah 1</dt><dd>Penjelasan</dd>
      <dt>Istilah 2</dt><dd>Penjelasan</dd>
      <dt>Istilah 3</dt><dd>Penjelasan</dd>
      </dl>

      Hasilnya :
      Istilah 1
      Penjelasan
      Istilah 2
      Penjelasan
      Istilah 3
      Penjelasan
Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.

Comments

Post a Comment

Popular posts from this blog

Pengertian dan Contoh Sederhana tentang Stack dan Queue

-
Image
STACK (Tumpukan) dan Queue (Antrian) Pada kesempatan kali ini, kita akan belajar bersama tentang Stack atau Tumpukan dan Queue atau Antrian. Stack dan Queue ini, berkaitan dengan Struktur Data  dalam sebuah aplikasi namun bisa juga dalam kehidupan sehari-hari kita. Stack dan Queue merupakan fungsi yang biasanya diimplementasikan pada program, tidak terkecuali Pemrograman Java. Untuk itu, sebelum membahas program sederhana Stack dan Queue menggunakan Pemrograman Java, kita simak terlebih dahulu pengertian dan penjelasan dari kedua fungsi tersebut dibawah ini.  STACK/Tumpukkan Stack adalah kumpulan suatu elemen dimana hanya elemen yang baru dimasukkan yang dapat diakses atau dilihat. Stack merupakan perintah pengumpulan data secara linear yang menyusun data seperti tumpukan dan bersifat Last In First Out(LIFO) yang berarti data yang terakhir masuk adalah data yang pertama keluar. Contoh dalam Kehidupan sehari-hari : Setumpuk koran, dimana koran yang paling terakhir ditamb
Read more

Permainan Logika tentang Algoritma

-
Image
3 Permainan Logika Tes IQ Pada kesempatan waktu ini, saya akan memberikan atau membahas tentang sebuah Game atau Permainan yang berkaitan dengan Tes IQ, karena Permainan ini harus dilakukan menggunakan akal, nalar dan logika kita. Karena Permainan ini berkaitan Algoritma, yang menyelesaikan masalah dengan logika, maka dalam postingan ini saya bahas bagaimana Algoritma dalam Game tersebut. Baik, langsung saja kita bahas dibawah bagaimana penyelesaiannya. Game Wolf, Sheep & Cabbage (Petani, Domba, Serigala dan Sayuran)  Pada permainan ini, terdapat Seorang Petani dengan membawa seekor Serigala, seekor kambing, dan rumput yang terkira beratnya tidak jauh berbeda. Untuk pergi ke kota di tengah perjalanan, Petani tersebut harus meyeberangi sungai dengan perahu. Namun kapasitas perahu, tidak memungkinkan untuk Petani tersebut membawa semuanya. Ia harus membawa satu persatu bawaannya. Tetapi ketika Petani tersebut menyeberangkan, sisa bawaannya harus tidak saling berhu
Read more

Cara Menyisipkan Tanggal (JCalender) di Java NetBeans dan di Simpan dalam Database

-
Image
JCalender di Java Netbeans Artikel ini adalah kelanjutan dari artikel sebelumnya tentang database yaitu Contoh Database dengan XAMPP dan Java Netbeans yang tidak menyisipkan komponen tanggal. Maka untuk kali ini, Firman akan memberikan Contoh Program Database dari Java yang dapat memasukkan data tanggal. Biasanya digunakan saat kita membuat program untuk memasukkan tanggal lahir, tanggal saat kita melakukan penjualan pada aplikasi atau lainnya. Lalu bagaimana cara membuat program yang dapat memasukkan data tanggal dan disimpan didalam Database. Baiklah langsung saja kita simak berikut dibawah ini. Saat kita ingin memasukkan tanggal di JFrame Form, kita harus mempunyai sebuah komponen yang dapat menampilkan data tanggal. Oleh karena itu, kita membutuhkan sebuah library (pustaka) untuk mengolah data tanggal tersebut. Library tersebut adalah JCalender   yang mempunyai format .jar . Secara default Library tersebut tidak ada di dalam Palette bawaan Netbeans. Jadi, kita bisa menamb
Read more