Tampilkan postingan dengan label elemen pada HTML. Tampilkan semua postingan
Tampilkan postingan dengan label elemen pada HTML. Tampilkan semua postingan

Senin, 28 September 2015

By Chakra Bernat

Tutorial HTML Dasar : 10. Mengenal Fungsi Tag Div dan Span

Tutorial HTML Dasar : 10. Mengenal Fungsi Tag Div dan Span

Sekarang kita akan Mengenal tag div dan span, jika sebelumnya sahabat sudah melihat tutorial sebelumnya. Kalau belum kita silakan lihat dulu Tutorial HTML Dasar : 9. Mengenal Tag Table dan List di HTML. Tag ini akan seiring kita jumpai pada template atau web design karena kedua tag ini secara garis besar tidak mempunya arti atau fungsi apa-apa. Tapi, jika kita ingin menjadi web designer kita akan sering menggunakannya. Mari kita bahas tag div dan span dibawah ini.

Pengertian dan fungsi tag div
Div adalah tag block-level yang tidak mempunyai arti sama sekali. Block level ini maksudnya tag yang bisa menyesuaikan dengan lebar web yang tersedia dan ketika ditutup tag div maka tag lain akan tampil di garis baru. Maka dari itu tag ini sering digunakan untuk design web. Berikut adalah contoh tag block level selain div :
  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
Langsung saja, kita buat contohnya :
<!doctype html>
<html>
     <head>
            <title>Belajar Div dan Span</title>
     </head>
     <body>
            <div style="background-color:lightblue; ">
               <h2>Belajar Div</h2>
               <p> Bandung adalah kota di provinsi Jawa Barat.</p>    
            </div>
     </body>
</html>
Coba buat file html seperti diatas dan lihat hasilnya, akan tampil background biru muda sesuai lebar website atau browsernya. Itulah mengapa seorang designer web menggunakan div untuk designnya.

 Pengertian dan fungsi tag Span
Span adalah tag inline yang tidak mempunyai arti sama seperti div. Inline biasanya digunakan didalam sebuah container atau didalam tag div. Tag span tidak mempunyai attribut, tapi sering digunakan attribut class atau id, untuk menghubungkan dengan css maupun javascript. Berikut contoh tag iniline :

  • <span>
  • <a>
  • <img>
Sekarang mari kita buat contohnya :
<!doctype html>
<html>
     <head>
            <title>Belajar Div dan Span</title>
     </head>
     <body>
            <div style="background-color:lightblue; ">
               <h2>Belajar Div</h2>
               <p> <span style="color:grey">Bandung<span> adalah kota di provinsi Jawa Barat.</p>  
            </div>
     </body>
</html>
 Coba edit file tedi menjadi seperti diatas. Bagaimana sobat? mengerti kan sekarang tentang fungsi div dan span. Jika belum mengerti komen aja dibawah ini. Terima kasih telah membaca Tutorial HTML Dasar : 10. Mengenal Fungsi Tag Div dan Span, Semoga bermanfaat.

Senin, 14 September 2015

By Chakra Bernat

Tutorial HTML Dasar : 4. Mengenal apa itu Elemen dan Atribut pada HTML


Pada kali ini kita akan belajar tentang elemen dan atribut pada HTML. Pada pembahasan sebelumnya kita telah mengenal atau mempelajari tentang tag-tag dasar HTML. nah, sekarang kita akan mempelajari apa itu elemen dan seperti apa elemen itu ?

Elemen adalah segala sesuatu yang ditulis diantara tag pembuka dan tag penutup. Biar ga bingung saya sertakan contohnya :

<p>Ini adalah tag paragraf.</p>
<p> = tag pembuka
ini adalah tag paragraf = elemen
</p> = tag penutup
Oh iya hampir lupa, setiap tag itu mempunyai tag penutup seperti contoh diatas. Akan tetapi ada beberapa tag yang tidak punya penutup, seperti : <br>. Yang lainnya menyusul, saya yakin nanti kalian akan tau sendiri kalau sudah bisa HTML.
Sintak diatas adalah contoh 1 elemen. Sekarang saya akan membuat sintak HTML yang berisi 5 elemen.
<!doctype html>
<html>
     <head>
           <title>Web Pertamaku</title>
     </head>
     <body>
           <h1>Hello World!, This is my first web</h1>
     </body>
</html>
 Contoh diatas yaitu sintak yang berisi 5 elemen, yang mana sajakah elemen itu ?? mari kita lihat di TeKaPe hihihi...
Yang ke satu, Tag <html> itu elemennya yang ada dibawah ini :
     <head>
           <title>Web Pertamaku</title>
     </head>
     <body>
           <h1>Hello World!, This is my first web</h1>
     </body>
 Yang ke dua, Tag <head> elemennya yang ada di bawah ini :
<title>Web Pertamaku</title>
 Yang ke tiga, Tag <body> elemennya yang ada dibawah ini :
<h1>Hello World!, This is my first web</h1>
 Yang ke empat, Tag <title> elemennya yang ada dibawah ini :
Web Pertamaku
 Yang ke lima, Tag <h1> elemennya yang ada dibawah ini :
Hello World!, This is my first web
Nah itu dia elemen tersebut. Jangan lupa tag penutupnya ya sobat, untuk membiasakan kita rapih dalam coding. Sebenarnya HTML akan memaafkan jika kita lupa menutupnya salah satu, akan tetapi jika kita sudah berurusan dengan web design nanti terhat sekali perbedaannya. Maka dari itu kita biasakan coding dengan rapih. Oke lanjut, sekarang mari kita bahas tentang Atribut.

 Atribut adalah suatu informasi tambahan untuk elemen berada didalam tag pembuka atau berada dalam tanda "< >". Setiap atribut mempunyai nilai atau value. saya berikan contoh :

<a href="http://www.chakra-media.tk">Chakra media.tk</a>
 href inilah yang disebut atribut dan http://www.chakra-media.tk itu adalah nilainya atau value. Jangan pakai tanda kutip satu atau dua agar terbiasa, sebenarnya tanpa kutip juga bisa, tapi lebih susah ketika dalam satu tag ada beberapa atribut.
Silakan sobat coba HTML ini untuk latihan :

<!doctype html>
<html>
     <head>
           <title>Web Pertamaku</title>
     </head>
     <body>
           <h1>Hello World!, This is my first web.</h1><br/>
           <p>Silakan klik link ini
                 <a href="http://www.chakra-media.tk">Chakra media.tk</a>
           </p>
     </body>
</html>
 Mungkin cukup sekian tutorial dari saya mengenai elemen dan atribut. Jika ada yang kurang berkenan dihati sahabat silakan berkomentar, untuk koreksiannya.

Terima kasih telah membaca postingan ini, semoga bermanfaat :).
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.
  • Contact
  • Privacy Policy
  • Disclaimer