Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya. Mengedit Template atau tampilan sebuah web/blog tidak lepas dari yang namanya HTML serta CSS. Sebab, ini lah komponen penyusun bagaimana bentuk, fungsi, warna, dan atribut penyusun tampilan blog lainnya. Tapi, dalam mengartikan dan mengedit HTML dan CSS ini menurut saya cukup sulit. Saya pun disini masih pemula.
Kode kode yang ada dalam rangkaian HTML blog mempunyai arti dan kegunaannya masing masing dan bukan hal mudah untuk mengubah fungsi yang dihasilkan dari kode tersebut. Salah salah, tampilan blog kita malah jadi hancur berantakan. Untuk itu, saya kali ini share yang saya ketahui seputar HTML dan CSS.
Apa itu HTML?
HTML merupakan kependekan dari HyperText Markup Language atau dalam pengertian bahasa Indonesia berarti dokumen HTML atau rangkaian kode yang bertuliskan dengan bahasa pemformatan yang dapat diterjemahkan oleh web browser dengan menggunakan tanda tanda tertentu yang sering disebut Tag. HTML inila yang menyusun sebuah halaman web. Misalkan seperti membentuk gambar, widget, dan objek lainnya.
Tutorial Dasar Penggunaan HTML
Kode HTML mempunyai aturan yaitu harus mempunyai Tag Pembuka dan Tag Penutup.
<TAG>..rangkaian html...</TAG> (jika tag pembuka diawali dengan <, kalau tag penutup diawali dengan </)
Contoh kode HTML yang sederhana:
<html>
<head>
Disini terdapat beberapa CSS serta meta tag
</head>
<body>
Disini terdapat berbagai rangkaian HTML penyusun widget ataupun yang lainnya
</body>
</html>Catatan:
Anda dapat membuat TagChild didalam tag yang lebih besar. Pada contoh sederhana diatas, dapat disimpulan bahwa:
* <html> merupakan tag yang di dalamnya memiliki 2 tag child atau anak yaitu <head> dan <body>
* Dibawah <html> terdapat kode <head>. Jika konten HTML untuk <head> sudah terpenuhi, jangan lupa untuk ditutup dengan </head>
* Karena di dalam <html> disebutkan jika ada 2 TagChild yaitu <head> dan <body>, maka jangan pasang tag penutup </html>
* Dibawah tag penutup </head>, pasang lagi kode <body>, lalu isikan dengan konten yang anda buat, setelah itu tutup lagi dengan </body>
* Terakhir, tutup seluruh rangkaian dengan </html>
Jadi, dalam membuat HTML, kita harus teliti tag mana yang lebih menyeluruh dan mana peranakannya. Masih bingung? Kalau begitu saya berikan contoh HTML yang paling sederhana yaitu Link.
Secara default, html link adalah
<a href='http://jonarendra.blogspot.com/'>Jona Rendra</a>
Tag pembuka disana adalah <a dan diikuti dengan href karena membuat sebuah kata yang terdapat link. Dan ditutup dengan </a>
Nah, perhatikan yang lebih rumit berikut
<a href='http://jonarendra.blogspot.com/'>
<b>
<u>
<i>
Jona Rendra
</i>
</u>
</b>
</a>Untuk menempatkan Tag Penutup, kita harus memperhatikan tag pembuka mana yang duluan. Maksudnya begini apabila diatas adalah
<a><b><u><i>Jona Rendra</i></u></b></a>maka, tag penutup harus mempunyai urutan yang teratur seperti pemantulan cermin. Apabila memasang seperti
<a><b><u><i>Jona Rendra</a></b></u></i>anda akan gagal
Apa Itu CSS?
CSS merupakan kependekan dari Cascading Style Sheet atau arti bahasa Indonesia nya adalah kode atau aturan yang mengendalikan suatu komponen HTML web/blog, supaya lebih rapi, terstruktur dan seragam. CSS ini biasanya dapat memberikan efek dari HTML yang akan di atur. Contohnya, CSS dapat mengatur ukuran lebar dan tinggi halaman blog, warna dari latar, ukuran, gaya serta warna font, efek hover pada gambar, dan parameter lainnya.
Tutorial Dasar CSS
Format penulisan CSS contohnya sebagai berikut
-selector- {property: value; property: value;}Keterangan:
- -selector- merupakan kode yang dapat mengaitkan css dengan html yang akan diatur
- { adalah tag pembuka
- property: adalah atribut yang ingin kita atur dari html misalkan background, border, font.
- value adalah aturan untuk property. Contoh property yang digunakan adalah border, maka value nya adalah ketebalan garis dengan format 1px, 2px atau angka yang lain.
- Nah, penutup dari property adalah tanda ; lalu penutup CSS adalah }
Contoh CSS sederhana
.image {border: 1px solid: #000; background: #CCC;}Terdapat selector .image berarti CSS ini mengatur HTML dengan tag pembuka
<div class='image'>Kalau selector diatas adalah #image, jadi HTML yang diatur memiliki tag pembuka
<div id='image'>Misalkan saya ingin membuat CSS untuk HTML
<span class='image' id='text'>Bagaimana selector yang akan dibuat? Ya pilih salah satu. Bisa .image atau #text
Perlu diingat, agar dapat menghubungkan HTML dan CSS, pada CSS perlu di apit dengan
<style> dan </style>, baru terakhir HTML. Susunannya sebagai berikut
<style>
.test {property: value; property: value}
</style>
<div class='test'>
rangkaian HTML
</div>HTML dan CSS memang mempunyai kesamaan, yaitu sama sama pakai kode kode yang rumit dan sulit untuk dimengerti. Yang bisa menerjemahkannya ya cuma web browser. Itulah artikel dari Jona Rendra yang berjudul Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya, semoga dapat bermanfaat untuk anda ketika sedang belajar HTML serta CSS. Jika ada yang belum dimengerti, silahkan tanyakan lewat komentar.
0 komentar:
Posting Komentar