Header Ads

  • Breaking News

    Pembuatan paragraf, format karakter dan membuat daftar di HTML

    Cerita Dosen, Sepriano - Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 2, silahkan dibaca, dipahami dan dipraktikkan di laptop masing-masing.

    Cara Membuat Tag Paragraph <p>

    Untuk memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur HTML yang dibuat pada tutorial sebelum ini, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:

    Contoh penggunaan tag paragraf:


    Hasilnya pada browser seperti pada gambar di bawah ini

    Tag Break (<br>)

    Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).

    Contoh penggunaan tag break:


    Hasilnya pada browser seperti pada gambar di bawah ini

    Cara Memasukkan dan Menampilkan Karakter Khusus pada HTML

    Selain karakter alfanumerik, kadang kita butuh menulis karakter-karakter khusus ke dalam HTML, misalnya tanda “<”. Karakter kurung siku “<” tidak bisa dituliskan begitu saja di dalam HTML, karena karakter kurung siku berfungsi internal dalam HTML sebagai tanda pembuka tag. Di dalam tutorial text HTML kali ini, kita akan mempelajari cara menampilkan dan memasukkan karakter khusus ke dalam HTML.

    Untuk memasukkan karakter-karakter khusus ke dalam HTML, kita harus men-‘escape’ karakter tersebut. Istilah escape maksudnya bahwa dari pada menulis sebuah karakter secara langsung, kita bisa menggantinya dengan angka atau referensi yang merujuk kepada karakter tersebut.

    Dalam HTML, terdapat 2 cara untuk men-‘escape’ karakter, yaitu dengan menggunakan penomoran angka (numeric entity), dan menggunakan singkatan untuk karakter (named entity). Kedua cara ini ditulis dengan karakter ‘&’ pada awal penulisan, dan diakhiri dengan karakter ‘;’.

    Sebagai contoh, jika saya ingin menuliskan karakter “<” di dalam konten HTML, maka

    penulisannya adalah sebagai berikut:


    Hasilnya adalah sebagai berikut


    Tabel Karakter Khusus dalam HTML

    Selain karakter “<”, HTML menyediakan ratusan karakter khusus yang bisa digunakan. Berikut adalah tabel karakter khusus yang sering digunakan:


    Contoh penggunaan karakter spesial seperti gambar di bawah ini


    Hasil yang didapatkan


    Cara Membuat Daftar/List di HTML

    Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.


    Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.

    Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:


    Maka akan dihasilkan seperti gambar di bawah ini


    Untuk membuat unordered list, tinggal ganti tag <ol>menjadi <ul>.
    Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:


    Maka akan dihasilkan seperti gambar di bawah ini


    Untuk membuat unordered list, tinggal ganti tag <ol>menjadi <ul>.
    Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:

    Hasil yang ditampilkan adalah sebagai berikut

    Untuk membuat nested list dapat dilakukan dengan kode seperti di bawah ini


    Hasil yang didapatkan seperti gambar di bawah ini


    Tidak ada komentar

    Post Bottom Ad