Tingkat Dasar IONIC - Tags - Appcamp

Pada pembahasan sebelumnya sudah dijelaskan tentang cara membuat aplikasi Hello World yang sederhana. Kali ini akan dijelaskan cara menambahkan tag tag ke dalam kode program. Anda bisa menggunakan kode program yang sudah dibuat berdasarkan pembahasan sebelumnya. Penambahan Tag tag pada pembahasan ini bertujuan untuk memperbaiki tata letak judul dan paragraph.

Aplikasi dengan Tags
Materi ini sudah disediakan kode-kode untuk mempermudah memahami penggunaan tags di framework ionic. Kode program dan tampilannya adalah sebagai berikut, kode tersebut masih belum diberi tambahan tag tag html.

Tampilan dari aplikasi seperti diatas dan bisa dilihat tulisan Hello World dan penjelasannya menjadi satu tidak ada jarak seperti paragraph, hal ini tidak seperti yang diharapkan, dan pada paragraph ke 2 juga bergabung menjadi 1 paragraf dengan paragraph satu. Untuk memperbaikinya maka pada judul diberikan tag header, dan setiap paragraph diberikan tag ‘p’ atau paragraph. Langkah – langkahnya adalah sebagai berikut :

Menambahkan tag header pada judul, tag header ini berfungis untuk member style judul pada sebuah tag. Header memiliki banyak tingkatan dari tingkatan 1 sampai tingkatan 6. Jika semakin tinggi tingkatanya maka style unkuran font akan semakin besar. Kode program nya seperti berikut, pada contoh ini saya menggunakan header ke 3 agar tampilan hurufnya tidak terlalu besar :

<h3>Hello World</h3>

Cukup menambahkan tag pembuka pada awal kata Hello World dan tag penutup pada kata tersebut. Maka tampilannya akan menjadi seperti dibawah ini :
 

 

Judul sudah rapi, selanjutnya member tag paragraph pada setiap paragraph. Format penulisan tag ini adalah <p> tulisan </p>, mempunyai tag pembukan dan tag penutup.
Hasil akhir dari kode program nya adalah seperti berikut beserta tampilannya.

 

Sekarang tampilan dari penjelasan aplikasi sudah tersusun rapi. Perlu diingat bahwa tag header adalah untuk membuat judul pada setiap penjelasan atau materi dan tag paragraph adalaah tag untuk membuat sebuah paragraph atau dengan kata lain untuk member jarak pada setiap isi.

Bagaimana, gampang kan ? Untuk materi selanjutnya masih mengenai dasar dasar Ionic dengan materi Grid System. Dan jangan lupa untuk menyimpan project kedalam sebuah file teks. Karena biasanya data kode program tidak tersimpan.

Itu saja untuk materi kali ini. Semoga Bermanfaat. Jangan lupa untuk share.