Senin, 09 Maret 2015

Pemahaman Tentang HTML dan Webpag

Pemahaman Tentang HTML dan Webpag


HTML adalah kependekan dari Hypertext Markup Language yang merupakan bahasa pemrogaman yang khusus dirancang untuk mendesain sebuah webpage atau halaman web. Ya, itu perngertian yang diambil dari post-post saya sebelumnya. Dokumen HTML ini bisa kita buat dengan software teks-teks editor maupun software web developer. Tapi sebagai seorang pemula, termasuk saya, ada baiknya menggunakan PHPDesigner, Ms Frontpage 2003, dan software-software editor HTML lainnya, mengapa? Karena sodtware-software itu telah menyediakan banyak tag dan atributnya, sehingga pengguna tidak akan kesulitan dalam menentukan tag untuk sebuah elemen.

html, CSS, Blogger, belajar, dasar, pemrograman, learning, how to, basic


Eeeeiiit....tunggu dulu. Sebelum membuat dokumen HTML atau webpage, apa yang harus disiapkan? gampang saja, Sebelum membuat dokumen ini, kita diwajibkan mengerti atau paham tentang istilah-istilah yang ada dalam HTML.

Pertama, kita diharuskan paham tentang struktur sebuah HTML. Sebuah dokumen HTML disusun atas tiga bagian besar, yaitu bagian HTML itu sendiri, Head, dan juga Body. Struktur dasar sebuah dokumen HTML kurang lebih seperti ini:



<HTML>
    <head>
        Tempat meletakkan informasi sebuah webpage
    </head>
    <body>
        tempat menempatkan informasi yang akan ditampilkan ke dalam webpage
    </body>
</HTML>

Sampel diatas, terdiri atas elemen HTML, elemen Head, dan elemen Body. Sekarang, apa pengertian dari Elemen? Oke, Elemen adalah data tunggal yang akan ditampilkan di halaman web. Beberapa contoh elemen lain seperti ini:

<h1>Blog Lintang</h1>

Kedua, kita juga diharuskan mengerti apa itu tag dan atribut. Sekarang pengertian tag dulu, tag adalah kode yang digunakan untuk menandai atau memformat sebuah elemen yang akan ditampilkan di webpage atau halaman web.

Tag terdiri atas kurung buka (<) dan kurung tutup (>), contohnya seperti pada struktur dokumen HTML diatas, <head> merupakan tag head dan <body> merupakan tag body. Lalu, bagaimana cara membuat tag? Pertanyaan yang mudah dijawab. Tag sendiri terdiri atas dua bagian, yaitu tag pembuka dan tag penutup. Formatnya kurang lebih seperti dibawah ini:

<namatag>data</namatag>

Kalo kita perhatikan seksama, contoh diatas memuat dua tag, tag yang didepan tidak ada garis miringnya. Sedangkan yang di belakan ada. Mengapa demikian? Sebuah elemen diformat dengan menggunakan dua tag, tag yang satu berfungsi sebagai tag pembuka dan satunya sebagai tag penutup. Nah, diantara tag pembuka dan penutup tersebut, kita menaruhkan data yang akan ditampilkan di webpage, atau biasa disebut elemen.

Berikut ini merupakan beberapa contoh elemen:
<p>...</p> digunakan untuk memformat paragraft teks
<table>...</table> digunakan untuk membuat tabel, dll

Didepan tadi saya telah jelaskan bahwa tag terdiri atas pembuka dan penutup, ada juga tag yang tidak disertai penutupnya, yaitu;
<br> membuat paragraft
<hr> membuat garis horizontal
<li> membuat list teks

Saat kita paham tentang elemen tag, kita juga diharuskan paham tentang apa itu atribut. Perhatikan contoh dibawah ini:

<font>...</font>
<font type="courier new">...</font>

Apa persamaan dari contoh diatas? Keduanya sama-sama tag, jawaban benar. Lalu apa perbedaannya? Pada contoh diatas, dibaris yang kedua, ada unsur type="courier new", nah itulah yang dinamakan atribut. Pada baris pertama, tag hanya memunculkan teks biasa pada browser, tapi pada baris kedua, tag akan memunculkan teks dengan jenis huruf courier new.

Jadi, dengan melihat contoh diatas, bisa kita simpulkan bahwa atribut merupakan bagian dari tag yang digunakan untuk menuliskan spesifikasi dari sebuah elemen. Ada banyak tag dan atribut yang bisa kita gunakan untuk memformat webpage kita, tapi tentunya, kita tidak akan membahasnya sekarang. Insyaallah, pada postingan selanjutnya, saya akan tampilkan tag dan atribut HTML.

Sekedar tips saja, untuk belajar tag HTML ini, anda bisa mendownload template web dan mengeditnya sendiri. Terimakasih.

0 komentar:

Posting Komentar

By :
Free Blog Templates