HTML DASAR – Paragraf pada HTML

CODEORAYO COMMUNITY Web Development Tutorial HTML & CSS HTML DASAR – Paragraf pada HTML

  • Post
    codeorayo
    Keymaster
    none
    Pada tutorial kali ini kita akan membahas tentang pengaplikasian Paragraf pada HTML. Dalam sebuah halaman website tentunya tidak hanya mengandung gambar, table, atau video saja, pastinya juga mengandung sebuah rangkaian kalimat yang menjadi satu, sehingga saling berhubungan dan membentuk satu kesatuan pokok pembahasan yang membahas sebuah topik, hal ini disebut Paragraf.

    Dalam penulisannya pun, terdapat gaya penulisan seperti membuat tulisan tebal, miring, bergaris bawah, berwarna, pengaturan spasi antar baris, pengaturan penjajaran, penjudulan, dan menentukan jenis font.

    Tag yang digunakan dalam merancang sebuah paragraf adalah tag 

    . . .

    . Tag ini termasuk ke dalam kategori BLOCK – ELEMENT, yakni elemen HTML yang secara otomatis akan membuat baris baru.

    Code:





    Belajar Paragraf

    HTML merupakan kepanjangan dari Hypertext Markup Language, HTML merupakan bahasa pembangun website. Konsepnya seperti dokumen, karena HTML memang bahasa markah.

    Belajar HTML sangatlah mudah, kita hanya tinggal mengetahui aksi yang terjadi dari tiap Tag-tagnya. Dalam HTML pula akan kalian kenal istilah – istilah seperti atribut, elemen, block elemen, inline elemen dan istilah lainnya.

    HTML hanyalah bahasa pembuat dokumen website, untuk menghasilkan website yang bermutu dapat kalian tambahkan CSS dan Javascript, dan untuk membuatnya lebih interaktif dapat ditambahkan bahasa pemrograman seperti PHP


    Dan berikut hasilnya :

    [img width=1024,height=530]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-Ouput-1024×530.png[/img]

    Penjajaran Kalimat (Alignment)Dalam tag 

    , terdapat atribut yang umum digunakan yakni “align” yang berguna sebagai Penjajaran Text seperti left (rata – kiri), right (rata – kanan), justify (rata – kanan – kiri), dan center (rata – tengah).

    Code:




    Penjajaran Paragraf

    Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah Rata – tengah

    Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri, Rata – kanan – kiri,

    Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri Rata – kiri

    Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan, Rata – kanan,


    Dan di bawah ini adalah hasil dari kode sumber di atas :

    [img width=1024,height=531]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-Alignment-1024×531.png[/img]

    Penjudulan Kalimat (Heading)Seperti namanya, Heading digunakan sebagai Penjudulan halaman. Digunakan sebagai judul dari tiap – tiap materi yang disampaikan.

    HTML menyediakan 6 tag heading, masing – masing mulai dari yang terbesar sampai ke yang terkecil.

    Code:



    Heading

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6


    Gambar di bawah ini adalah hasilnya :

    [img width=443,height=559]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-Heading.png[/img]

    Dan ingat, jangan gunakan tag heading untuk menebalkan teks, DOSA… Hal ini akan menyalahi aturan penggunaan tag heading sebenarnya…!!!.

    Tag Heading ini juga akan terindex oleh mesin pencari. Tag Heading juga sering digunakan dalam penamaan Bab Halaman.

    Code:




    Penjudulan

    BAB I

    Sub Bab I

    Sub I Sub Bab I

    Sub II Sub Bab I

    Sub Bab II

    Sub I Sub Bab II

    Sub II Sub Bab II


    Output :

    [img width=402,height=544]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-Heading-2.png[/img]

    Format TeksFormat teks yang umum digunakan dalam pembuatan paragraf adalah membuatnya menjadi Miring, Tebal, dan Bergaris bawah. Untuk pembahasan tentang Format Teks lebih mendalam akan dibahas pada materi selanjutnya.

    Code:




    Format Teks


    Ini adalah format teks miring dengan tag
    Ini adalah format teks miring dengan tag
    Ini adalah format teks tebal dengan tag
    Ini adalah format teks tebal dengan tag
    Ini adalah format teks bergaris bawah dengan tag

    Dan di bawah ini adalah hasilnya :

    Code:

    


    [img width=1024,height=419]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-Format-Teks-1024×419.png[/img]

    Horizontal RuleDigunakan sebagai pemisah, dengan format berupa garis. Tag yang digunakan adalah tag 


     atau kalian juga dapat menulisnya seperti ini 


    , keduanya tidaklah masalah.

    Code:





    Horizontal Rule

    HTML adalah bahasa pembangun website.


    CSS digunakan untuk membuat tampilan website menjadi lebih indah


    Javascript digunakan agar website menjadi lebih interaktif



    Output kode sumber di atas :

    [img width=1024,height=511]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-hr-1024×511.png[/img]

    Break RuleDigunakan sebagai pemisah dengan format berupa baris baru. Tag yang digunakan adalah tag 
     atau kalian juga bisa menulisnya seperti ini 
    , keduanya tidaklah masalah.

    Code:




    Break Rule


    HTML (Hypertext Markup Language)

    CSS (Cascading Style Sheet)

    Javascript

    Dan di bawah ini adalah hasilnya :

    [img width=1024,height=492]http://lautankode.com/wp-content/uploads/2018/01/Paragraf-BR-1024×492.png[/img]

    https://www.lautankode.com/paragraf-pada-html/

  • You must be logged in to reply to this topic.