Format Perataan Paragraf Dengan HTML

dalam HTML
Hosting Murah Berkualitas

Pada kesempatan kali ini saya akan berbagi ilmu pengetahuan website tentang bagaimana caranya memformat Format Perataan Paragraf Dengan HTML. Sebelum melanjutkan pada materi yang ada di artikel ini, saya harap anda sudah menguasai fungsi-fungsi tag yang sebelumnya sudah saya ajarkan di materi-materi tentang pembelajaran HTML sebelumnya.

Dengan anda menguasai materi-materi HTML tersebut nantinya akan memudahkan anda dalam melanjutkan pembelajaran ilmu website ke tahap berikutnya. Untuk mereview kembali pembelajaran tentang HTML ini silahkan anda lihat kembali materi-materi tentang HTML ini dengan mengklik link ini. Atau bisa juga anda mengarahkan kursor anda ke Menu Modul Tutorial –> HTML yang ada di website peterwebs.com ini.

Sebelum kita melanjutkan ke tutorial bagaimana cara Memformat Format Perataan Paragraf Dengan HTML ini, saya akan membahas dulu tentang tag-tag apa saja yang akan kita gunakan dalam artikel tutorial ini. Penjelasan lengkapnya adalah sebagai berikut.

Memformat Perataan Paragraf Dengan Menggunakan Tag <P>

Dengan menggunakan tag <P> ini nantinya, paragraf yang sudah kita buat akan diformat dengan 4 jenis perataan yaitu,

Perataan Kiri Dengan <P Align=”left”> Teks Paragraf </P>

Perataan Tengah Dengan <P Align=”center”> Teks Paragraf </P>

Perataan Kanan Dengan <P Align=”right”> Teks Paragraf </P>

Perataan Kiri dan Kanan Dengan <P Align=”justify”> Teks Paragraf </P>

Cara penggunaannya bisa anda lihat pada format diatas, yaitu dengan penggunaan tag <P Align=”jenis-perataan“> di ikuti dengan pemanggilan jenis perataannya. Jenis perataannya ada 4 yaitu perataan kiri (left), perataan (tengah), perataan kanan (right), perataan kiri dan kanan (justify).

Bagaimana cara menggunakannya nanti kita akan praktekkan bersama dengan penggunaan tag-tag yang lainnya.

Memformat Perataan Paragraf Dengan Menggunakan Tag <Blockquote>

Tag <Blockquote> ini biasanya digunakan untuk mnampilkan teks yang akan kita jadikan sebagai kutipan. Didalam tampilannya di halaman website biasanya tampil menjorok beberapa spasi jika kutipan tersebut berbentuk paragraf. Cara penggunaannya adalah sebagai berikut.

<Blockquote> Teks Paragraf </Blockquote>

Caranya dengan menggunakan tag <Blockquote> pembuka lalu diikuti dengan teks paragraf atau kalimat yang akan anda jadikan sebagai kutipan, lalu ditutup oleh tag penutup kutipan </Blockquote>.

Untuk melihat perbedaan antara tampilan penggunaan tag <Blockquote> ini dengan tag <P>, nanti bisa anda amati sendiri dalam praktek penggunaannya.

Memformat Perataan Paragraf Dengan Menggunakan Tag <Pre>

Tag <Pre> atau yang biasa disebut dengan perintah PreFormat Text ini nantinya akan menampilkan teks yang anda input dalam dokumen HTML tersebut persis seperti yang anda ketikkan langsung pada editor teks anda. Dengan penggunaan Tag <Pre> ini, maka penggunaan tombol enter dan tombol spasi dalam dokumen pun akan diperhitungkan. Jadi setiap yang anda ketik dalam dokumen HTML tersebut akan ditampilkan pada browser dalam bentuk yang sebenarnya. Atau dengan istilah lainnya adalah Wysiwyg yaitu What You See Is What You Get. Cara penggunaannya adalah sebagai berikut.

<Pre> Teks Unik Dengan Format Manual</Pre>

Mungkin dengan contoh diatas anda belum mengerti apa maksudnya. Untuk agar anda bisa mengerti, silahkan nanti tonton langsung Video Tutorialnya, nanti akan saya simpan dibagian bawah artikel ini. Dalam Video Tutorial tersebut saya akan coba jelaskan dengan praktek secara detail agar nanti anda mengerti apa yang saya maksud dengan penjelasan-penjelasan tadi diatas.

Membuat Garis atau Line Menggunakan Tag <Hr>

Dengan menggunakan Tag <Hr> ini nanti kita akan belajar memenggal paragraf dengan menggunakan objek garis. sebetulnya pemenggalan paragraf dengan garis ini tidak lazim dilakukan, karena dengan menggunakan tag <P> pun sudah cukup untuk memenggal kalimat-kalimat menjadi sebuah paragraf. Penggunaan Tag <HR> pada pembelajaran kali ini hanya sekedar untuk mempermudah anda saja dalam mempelajari pembelajaran. sekaligus sebagai pengenalan awal terhadap fungsi tag tersebut kepada anda. format penggunaannya adalah sebagai berikut.

<hr size=”2px”>

Cara menggunakannya bisa anda lihat contoh diatas, yaitu dengan memanggil tag <Hr> dilengkapi dengan atribut size lalu diikuti oleh ukuran nilainya dalam satuan px.

Selain ke 4 tag diatas juga, saya gunakan lagi tag-tag sebelumnya yang sudah saya bahas pada artikel sebelumnya, yaitu penggunaan tag <Font Size>,tag <Font color> serta <Body Background>. Bagi anda yang belum tahu bagaimana cara menggunakan  tag <Font Size> dan tag <Font color> ini, silahkan anda baca dulu artikel saya yang lain yang membahas tentang memformat ukuran huruf ini di artikel yang berjudul Memformat Ukuran Huruf Tetap dan Penggunaan Heading Dengan HTML dan pemberian warna pada huruf beserta backgroundnya bisa anda baca pada artikel yang berjudul Memberi Warna Pada Teks Dan Background Halaman Website Dengan HTML.

Sekarang jika anda ingin mengetahui perbedaan-perbedaan dari penggunaan tag tersebut silahkan lanjutkan dengan mempraktekkan tag-tag tersebut diatas dengan membuka aplikasi Notepad anda untuk membuat file HTMLnya.

Setelah Notepad anda terbuka, silahkan copy paste kode HTML dibawah ini :

<html>
<header>
<title>
Memformat Perataan Paragraf Dengan HTML
</title>
</header><body bgcolor=”yellow”>
<p align=”left”>
<font color=”red” size=5>Ini Paragraf Perataan Kiri </font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p><hr size=”2px”><p align=”center”>
<font color=”red” size=5>Ini Paragraf Perataan Tengah</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p><hr size=”2px”><p align=”right”>
<font color=”red” size=5>Ini Paragraf Perataan Kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p><hr size=”2px”><p align=”justify”>
<font color=”red” size=5>Ini Paragraf Perataan Kiri Dan Kanan</font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</p><hr size=”2px”><blockquote><font color=”red” size=5>Ini Paragraf Dengan <u>Blockquote</u></font> <br>
<font size=5>
Gambar adalah objek yang menarik untuk kita pasang pada halaman sebuah website.Keberadaan gambar pada website dapat mempercantik tampilan website.Tanpa adanya objek gambar pada halaman website di ibaratkan bagai hidup tanpa cinta, kita hidup tapi miskin rasa. Pada kesempatan kali ini saya akan mengajarkan pada anda bagaimana caranya Menampilkan Gambar Pada Background Dan Halaman Website Dengan HTML. Sebelum memulai pembahasan pembelajaran ini, anda siapkan dulu 3 buah gambar yang berformat JPEG. Gambar-gambar ini nantinya akan kita sisipkan pada halaman website anda.
</font>
</blockquote><hr size=”2px”>

<pre><font color=”red” size=5>Ini Contoh Penggunaan Tag <u>Pre</u></font> <br>

1 3 5 7 9
2 4 6 8
3 4 5
4 5
5

</pre>

</body>
</html>

Setelah kode-kode HTML tadi diatas sudah anda paste pada Notepad anda, maka silahkan save dalam bentuk file HTML. Caranya yaitu dengan memberi nama file anda dan dibelakangnya dikasih tanda titik (.) lalu diikuti oleh kata html, seperti contoh nama file anda adalah format-paragraf.html

Setelah filenya anda save, silahkan cari file format-paragraf.html tersebut lalu klik 2x pada file html tersebut untuk melihatnya di web browser anda. Tampilannya kurang lebih seperti gambar dibawah ini.

tampilan paragraf rata kiri, rata tengah, rata kanan

Tampilan Paragraf Rata Kiri dan kanan, tag blockquote dan tag pre

Demikian tampilan dari kode-kode HTML yang bisa anda copy paste diatas tadi. Kedua gambar diatas sebetulnya tampilannya adalah 1 gambar saja, cuma karena ketika dalam capture gambarnya terlalu lebar maka saya pisah jadi 2 gambar agar bisa anda lihat lebih jelas.

Jika anda belum faham benar dengan langkah-langkah yang saya jelaskan pada artikel ini, maka silahkan anda langsung tonton saja Video Tutorialnya. melalui Link yang dibawah ini. Atau Jika anda ingin melihat semua Video Tutorial Pembelajaran Website lainnya yang sudah saya upload ke youtube, maka silahkan anda kunjungi saja channelnya dengan klik link ini

https://www.youtube.com/channel/UCyHUJtWm75DPmaJ93L5trog

Untuk memudahkan anda mendapatkan Update Video terbarunya, maka silahkan anda klik tombol SUBSCRIBE atau LANGGANAN di channel youtube tadi GRATIS tidak dipungut biaya sepeserpun.

Sedangkan jika anda ingin Memaksimalkan Pengetahuan Tentang Komputer, maka silahkan klik

https://www.youtube.com/channel/UCCN00g4lvoawk5tWsU-_syA

Jangan lupa klik tombol SUBSCRIBE nya untuk ber LANGGANANGRATIS di channel youtube KE-2 saya ini untuk memudahkan anda mendapatkan UPDATE VIDEO TERBARU dari saya.

Saya cukupkan sekian dulu artikel dari saya yang berjudul Format Perataan Paragraf Dengan HTML ini. Harapan saya semoga dengan artikel dan video tutorial yang sudah saya buat ini bisa membimbing anda dalam membuat sebuah website, untuk itu maka ikuti terus update-update artikel di website peterwebs.com ini. Jika anda ingin melihat Video Tutorial lainnya dari saya, maka silahkan kunjungi Channel Youtube saya di Channel Youtube Belajar Website Cara Peterwebs.com. Dan jangan lupa berlangganan pada channel saya dengan mengklik tombol Subscribe agar anda selalu mendapatkan update-update terbaru dari Video Tutorial yang ada pada channel youtube saya tersebut. jangan lupa juga untuk berkomentar dan like. Terima kasih dan semoga bermanfaat.

Tags: #belajar html #html #kode html #membangun website #tutorial website #web design

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Cara Install WebServer XAMPP Dan Cara Mendownload Software XAMPP
Sebelum anda memulai untuk belajar membuat website,
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Cara Memasukkan Video Ke Halaman Website Dengan HTML
Pada kesempatan yang lalu saya sudah share
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Cara Mengcapture Gambar Di Komputer Dengan Screen Grab Pro
Kali ini saya akan sharing bagaimana caranya

Beri komentar "Format Perataan Paragraf Dengan HTML"

Baca juga×

Top