Belajar HTML Part 5: HTML Paragraf

Belajar HTML Paragraf untuk Pemula

Setelah sebelumya Anda pelajari tentang HTML heading sekarang kita akan bahas tentang HTML paragraf untuk membuat paragraf atau deretan kalimat yang digabung menjadi satu untuk membahas topik tertentu.

HTML Paragraf


Untuk membuat paragraf di HTML, Anda cukup menggunakan tag <p>.

Contoh:



Silakan Anda coba di Notepad lalu buka di browser. Anda akan melihat ada 2 buah paragraf disitu. Secara default, browser akan memberi jarak antara paragraf satu dengan paragraf yang lainnya.

Perbedaan Bentuk Paragraf


Mungkin muncul pertanyaan di dalam diri Anda, bagaimana tampilan paragraf di browser jika pengetikan paragraf di acak atau diberi enter seperti ini.


Meskipun cara Anda mengetik paragraf seperti itu, HTML paragraf yang ditampilkan di browser tidak akan mengikuti cara penulisan Anda. Browser akan menghapus tambahan spasi atau enter yang Anda lakukan di HTML paragraf.

HTML Line Break


Solusi kalau Anda ingin memberi jarak atau meng-enter kalimat yang masih menjadi satu paragraf adalah dengan menambah HTML line break yang memiliki tag khusus yaitu <br/>. <br/> adalah tag kosong, jadi tolong diingat - ingat untuk menutupnya dengan / (slash). 

Disini Anda bisa membuat baris baru tanpa mengetik paragraf baru.


Silakan Anda coba menambahkan tag <br/> dan lihat perbedaan dengan sebelumnya.

Tag Untuk Menebalkan dan Memiringkan


Dalam pembuatan paragraf, HTML sudah menyedia tag untuk menebalkan dan memiringkan huruf, kata, kalimat sampai paragraf. Saya akan memberi contoh satu per satu supaya Anda paham. Urutannya begini :
  1. Menebalkan dan memiringkan huruf
  2. Menebalkan dan memiringkan kata
  3. Menebalkan dan memiringkan kalimat
  4. Menebalkan dan memiringkan paragraf



Silakan Anda coba dan lihat perbedaannya masing - masing. Anda bisa coba untuk mengganti - ganti mana yang akan Anda ubah format penulisannya. Tapi hasil akhir kira - kira akan seperti ini.


Penting !
 Anda akan menemukan bahwa HTML memiliki tag <i> untuk memiringkan tulisan dan tag <b> untuk menebalkan tulisan, fungsinya sama seperti <em> dan <strong>. Sebetulnya untuk memformat suatu huruf, kata, kalimat atau paragraf tidak disarankan menggunakan tag - tag ini.
Para pakar HTML lebih menyarankan untuk mengubah format penulisan menggunakan CSS. Meski begitu empat tag ini <i><em><b><strong> akan memberi efek yang sama kalau Anda gunakan. Silakan coba saja agar lebih paham

setelah Anda peajari membuat paragraf dengan menggunakan HTML paragraf, di tutorial selanjutnya akan kita bahas tentang HTML style yang berguna untuk menghias elemen HTML.

Belajar HTML Part 4: HTML Heading

Belajar HTML heading untuk Pemula

Di dalam tutorial HTML Dasar, saya sudah bahas sekilas tentang Heading yang berguna untuk membuat judul pada HTML. Sekarang saya akan bahas tutorial yang sedikit lebih spesifik tentang heading yaitu HTML heading.

HTML Heading


Pada dokumen HTML ada tag yaitu tag heading. Tag heading memiliki urutan dimulai dari <h1> sampai <h6>. Tag ini sering digunakan untuk judul, bisa judul utama, subjudul, bab dan subbab. Semakin besar urutannya maka ukuran hurufnya akan semakin kecil.

Fungsinya apa ?

1. Fungsinya untuk mendefinisikan judul secara khusus.
2. Untuk faktor SEO, penggunaan heading ini untuk menekankan kepada search engine bahwa artikel kita memiliki topik penting yang dibahas dan memudahkan search engine untuk mengenali struktur pada halaman yang kta buat.
3. Untuk mengklasifikasikan judul. Misal judul yang paling utama menggunakan tag <h1>, untuk subjudul menggunakan tag <h2>, untuk bab menggunakan tag <h3> dan seterusnya.

Untuk lebih jelasnya ayo kita lihat penampakannya ya.

Sekarang coba Anda ganti tulisan - tulisan yang diapit oleh tag - tag h diatas dengan judul - judul karangan Anda sendiri. Setelah itu lihat hasilnya di browser.

Anda akan lihat perbedaan di setiap baris judul ya? Mulai tebal dan besar sampai kecil dan tipis. Kalau Anda lihat mulai dari <h1> itu adalah judul utama yang memiliki prioritas paling penting, dalam teknik SEO heading <h1> ini digunakan untuk mempermudah search engine mengenali isi artikel Anda. Nah di HTML, fungsi heading ini secara khusus untuk judul, jadi tolong inget - inget ya.


Penting ! Meskipun tag heading mampu menebalkan dan membesarkan tulisan, gunakan tag ini khusus hanya untuk judul.


Oiya satu hal lagi yang perlu Anda tahu bahwa browser akan menambahkan space putih istilahnya margin atau jarak atas dan bawah secara otomatis sebelum dan setelah heading. Lihat gambar di bawah ini.


Margin (jarak atas dan bawah) sebelum dan sesudah heading

Disini Anda sudah pelajari HTML Heading yang digunakan untuk memprioritaskan judul, mengklasifikasikan judul dan membuat search engine lebih mudah mengenali struktur halaman. Kalau ada judul, ada juga paragraf. Nah di HTML kita bisa membuat paragraf yang akan saya bahas di tutorial selanjutnya yaitu HTML paragraf. Silakan disimak.

Belajar HTML Part 3: HTML Dasar

Belajar HTML Aturan Dasar untuk Pemula

Oke sebelumnya Anda sudah praktekkan menulis tag - tag HTML menggunakan HTML Editor. Nah sekarang Anda akan saya kenalkan dengan dasar - dasar HTML. Jangan kuatir kalau ada tag - tag HTML yang belum Anda pelajari sebelumnya karena saya akan bahas mendetail di tutorial selanjutnya. Disini saya hanya akan mengenalkan secuil saja kok untuk permulaan.

HTML Document


Setiap kali Anda membuat dokumen atau file HTML, maka ada beberapa tag yang harus ada pada dokumen Anda karena tag - tag HTML ini merupakan tag dasar yang menjadi bagian dari struktur HTML. Tag - tag HTML tersebut adalah <!DOCTYPE html>, <html>, <head> dan <body>.

Mungkin muncul pertanyaan dari Anda bagaimana jika salah satu tag HTML tersebut tidak disertakan?

Oke,

Sebelum menjawab pertanyaan tersebut, ayo kita simak dulu penjelasan dari masing - masing tag HTML tersebut satu per satu.

Tag <!Doctype>


Doctype atau DTD adalah singkatan dari Document Type Declaration yang berguna untuk memberitahu browser bahwa bahasa yang digunakan adalah HTML. Kalau misalnya DTD tidak Anda deklarasikan dalam membuat file HTML maka browser tetap akan membaca file HTML Anda seolah - olah tidak ada sesuatu yang berubah. Tetapi kalau kita lihat dengan lebih mendetail maka fie HTML yang tidak ada DTD akan dijalankan oleh browser pada quirk mode

Pada quirk mode, browser membaca halaman web sedikit berbeda karena tidak ditemukan deklarasi DTD di didalamnya dan browser mengidentifikasi bahwa halaman web Anda merupakan halaman yang usang, nah supaya tetap dapat ditampilkan dengan baik oleh browser, maka browser menggunakan quirk mode secara otomatis untuk menampilkan halaman web Anda

Tag <html>


Ini adalah tag pembuka di dalam semua halaman web. Tag - tag HTML harus bedara di diantara (diapit) oleh tag <html> ini. 

Tag <head>


Tag <head> digunakan untuk mendefinisikan halaman, biasanya berisi tentang metatag dalam HTML, tag - tag CSS dan Javascript. Contoh yang paling mudah yaitu untuk memberi judul pada setiap halaman web, maka tag HTML yang digunakan adalah <title> nah tag <title>
 ini diletakkan di antara tag <head> dan </head>.

Tag <body>


Tag - tag HTML yang ada di dalam tag <body> inilah yang akan ditampilkan di browser, kalau Anda sebelumnya sudah membaca tentang HTML Editor, maka Anda akan pahami bahwa hanya tag yang berada di antara tag <body> dan </body> yang akan ditampilkan di browser. Selain itu, ada juga tag pada <head> yang bisa ditampilkan oleh browser tapi tidak semua, salah satunya yaitu tag <title> yang tadi sudah kita bahas.

Perlu Anda ingat bahwa tag - tag HTML memiliki pasangannya masing - masing yaitu tag pembuka dan tag penutupnya. Untuk memuat Anda paham, lihat penjelasan di bawah ini.

<tag pembuka>Ini adalah bagian yang ditampilkan di browser</tag penutup>

contoh :



Silakan Anda coba ketik di Notepad dan lihat tampilannya di browser.

HTML Headings


Untuk membuat heading di HTML, kita gunakan tag <h1> sampai <h6>.
<h1> menandakan bahwa text yang diapit dengan tag ini adalah text yang penting dan tag yang diapit <h6> kurang begitu penting. Contoh penggunaan :



Coba Anda ketik di notepad, simpan dan buka di browser Anda untuk melihat perbedaan dari tag <h1> sampai <h6>.

HTML Paragraf


Untuk membuat paragraf di HTML, tag yang digunakan adalah <p>. Contoh :


Silakan coba di notepad, simpan dan buka di browser Anda. Lihat disitu, akan ada 2 paragraf yang ditampilkan.

HTML Link


Link adalah huruf, kata, kalimat atau gambar yang diapit dengan tag < a href="">dan </a>. Kalau Anda berusaha klik maka dia akan mengarahkan Anda ke object lain. Object yang saya maksud disini bisa saja halaman website (bisa milik Anda sendiri atau milik orang lain) dan bisa juga efek tertentu akan muncul jika Anda klik .

Contoh :

<a href="https://klikfadhil.blogspot.co.id">Belajar HTML Dasar Mudah Untuk Pemula</a>

Sekarang coba Anda ketik di Notepad, simpan dan buka di browser. Lalu klik tulisan "Belajar HTML Dasar Mudah Untuk Pemula" maka Anda akan diarahkan menuju blog saya.

Anda bisa merubah tujuannya ke halaman profil facebook Anda dengan cara merubah isi dari attribute href dari https://klikfadhil.blogspot.co.id menjadi misalnya saja https://www.facebook.com/rakhmat.fadhillah. Sekarang kalau Anda coba lagi, maka akan diarahkan ke halaman profil Facebook saya.

HTML Gambar


Jika Anda ingin menampilkan gambar, maka tag yang digunakan adalah <img>. Nah tag <img> memiliki beberapa atribut yaitu src yang merupakan source dari file, alt yang berarti alternatif jika gambar tidak muncul, width dan height yang merupakan ukuran dari gambar.

Contoh :



Nah untuk mengetahui fungsi atribut alt, silakan Anda hapus tulisan "placehold.it" kemudian refresh browser Anda dan lihat apa yang muncul. Anda juga bisa saja merubah ukuran dari width dan heightnya lho. Silakan dicoba ya.

Oke, tadi sudah Anda pelajari beberapa dasar tentang tag - tag HTML dan cara pengetikannya, sekarang kita bahas mulai lebih detail di tutorial selanjutnya tentang HTML Heading.

Popular Posts