Pengertian HTML dan CSS Serta Tutorial Dasar Memakainya

7/09/2013 09:09:00 p.m.
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.

Share this :

Previous
Next Post »
12 Komentar
avatar

Numpang belajar mas di blog ini :D
Tutornya sangat menarik

Balas
avatar

ooh jadi kalo css itu memberikan efek pada html ya? makasih nih infonya ^_^

Balas
avatar

nambah lagi nih ilmu ane, makasih juragan ^_^ bermanfaat artikel nya ^_^

Balas
avatar

silahkan, di pelajari
maaf kalau artikelnya masih belum lengkap

Balas
avatar

iya, betul sekali
makasih juga ya atas kunjungannya

Balas
avatar

iya iya
makasih juga sudah mampir dan sempat berkomentar

Balas
avatar

wah tutor nya bagus sangat bermanfaat buat pemula bagi saya :)

ditunggu kunjungan baliknya yaa :)

Balas
avatar

simak dengan teliti mas,,biar nambah-nambah kas ilmu
hehehe

Balas
avatar

oke sip
makasih atas komentarnya
kunjungan balik berhasil

Balas
avatar

haha, ilmu saya juga bertambah

Balas
avatar

iya iya
memang perlu teliti di pelajari
sulit bahasa kode begini

Balas

Berkomentarlah dengan baik dan benar, dilarang SPAM

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini
  • © 2015 Simple SEO ✔