Pengenalan HTML dan CSS

Oleh Indra Daud (aidi)

Indra Daud

Code Sayaian


Sedikit cerita, awal saya mengenal pemrograman web adalah saat saya mencari cara menambahkan widget tulisan berjalan (baca marquee xD) di blog pertama saya (waktu masih pake blogspot). Sebaris kode yang saya temukan dari hasil browsing saat itu cukup sederhana untuk saya yang sama sekali tidak mengerti tentang kode-kodean. Itu merupakan kode HTML pertama yang saya tulis (lebih tepatnya copas) dan dari situlah petualangan saya dimulai xD.

Apa itu HTML ?

Mari mengintip wiki :

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Penjelasannya agak ribet ya ? Tenang, saya akan menjelaskan HTML secara sederhana agar lebih mudah dimengerti.

Jadi, apa itu HTML ?

Menurut pemahaman saya, HTML adalah kerangka yang membentuk dan mengatur bagaimana sebuah halaman web akan ditampilkan di browser. Untuk membentuk dan mengatur halaman tersebut kita menggunakan markah / tanda atau lebih umum disebut tag.

Tag HTML mempunyai tag pembuka dan penutup. Tag pembuka menggunakan simbol kecil dari (<) dan besar dari (>), begitupun dengan tag penutup, hanya saja untuk tag penutup di tambahkan slash (/).

Contoh : 

<html>
  <head>
    <title>HTML</title>
  </head>
  <body>
  </body>
</html>

Namun ada beberapa tag khusus yang tidak membutuhkan tag penutup. Contoh :

<img src='gambar.png'>
<input type='text'>

Pada contoh di atas anda bisa melihat sedikit perbedaan tag HTML contoh sebelumnya. Itulah yang disebut dengan attribute tag HTML. Penjelasan :

  • img dan input : tag HTML
  • src dan type : attribute tag
  • 'gambar.png' dan 'text' : value dari attibute

Apakah HTML merupakan bahasa pemrograman ?

Tidak, seperti penjelasan dari kutipan wiki di atas, HTML hanyalah sebuah bahasa markah, atapun penanda. HTML tidak bisa melakukan operasi aritmatika, melakukan perulangan, menangani percabangan dan proses lain yang bisa dilakukan oleh sebuah bahasa pemrograman. Namun semua orang yang ingin terjun ke dunia web programming wajib mengenal HTML terlebih dahulu.

Sudah cukup mengerti dengan penjelasan HTML ? Mari kita lanjut dengan sesuatu yang lebih keren.

CSS

Intip wiki dulu yuk :

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Kenapa kita membutuhkan CSS ?

Jika kita ibaratkan website sebagai rumah dan anda sudah membangun rumah tersebut menggunakan jasa tukang bangunan (dalam hal ini HTML) maka tahap selanjutnya adalah membuat rumah anda tampak cantik. Si tukang bisa saja menempatkan pintu dan jendela di posisi yang tepat, ia juga bisa mengecat rumah anda dengan bagus. Namun si tukang punya kekurangan, ia tak memiliki banyak kemampuan untuk mendekorasi rumah anda dengan baik. Maka anda perlu seseorang yang handal untuk mengatasi masalah tersebut yaitu seorang dekorator (CSS). Si dekorator punya pengetahuan lebih tentang keindahan dan tentu saja ia juga punya kemampuan dekorasi melebihi si tukang.

Yup, kemampuan HTML untuk mengatur tampilan halaman website memang terbatas. Sebagai contoh, anda bisa membuat warna yang berbeda saat mouse mendekati link tersebut dengan CSS tapi anda tidak bisa membuatnya dengan HTML. Keren kan?

Bagaimana contoh kode CSS ?

body{
  background : blue;
}

Mudah dimengerti kan ?

Pada contoh di atas, kode css memiliki 3 bagian yaitu :

  • selector (contoh : body)
  • property (contoh : background)
  • value (contoh : blue)

Lalu, bagaimana cara penggunaan CSS ?

Ada 3 cara penggunaan CSS :

Inline Style Sheet

Cara ini cukup mudah yaitu langsung menuliskan kode css kita pada tag HTML (dalam css disebut selector), contoh :

<body style='background:blue'>
  • body : tag HTML
  • style : attribute HTML
  • background : property
  • blue : value

Internal / Embedded Style Sheet​

Cara penggunaan internal / embedded style sheet yaitu dengan menggabungkan kode css dengan file HTML namun ditulis di dalam tag head.

Contoh :

<html>
  <head>
    <style>
      body{
        background : blue;
      }
    </style>
  </head>
  <body>
  </body>
</html>

External Style Sheet

Cara ini adalah cara yang paling banyak dipakai untuk penggunaan css, yaitu dengan memisahkan kode css anda di file sendiri dengan ekstensi .css

Contoh kode dalam file css :

body{
  background: blue;
  color: black;
}
p{
  font-size: 12px;
}

Untuk menggunakan file CSS tersebut kita harus menambahkan sebaris kode dalam tag head file HMTL

Contoh :


<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css_saya.css">
  </head>
  <body>
  </body>
</html>

Bagusnya pakai yang mana ?

Cara terbaik menggunakan CSS yaitu External Style Sheet. Karena selain membuat dokumen HTML terlihat rapi, cara ini juga memungkinkan kita membuat beberapa halaman web dengan tampilan yang sama.

Penutup

Bagaimana ? Cukup mudah dimengerti ? 

HTML dan CSS adalah dasar bagi siapapun yang ingin terjun kedunia pemrograman web. Baik dia seorang web programmer, web designer, web developer maupun profesi yang berhubungan dengan website, mereka awalnya berkenalan dengan HTML dan CSS sebelum mereka menjadi seseorang yang profesional pada bidangnya.

Saya sarankan anda untuk tidak berhenti sampai disini, karena judul artikel ini adalah Pengenalan HTML dan CSS, apa yang saya tulis disini hanyalah mengenalkan kepada anda apa itu HTML & CSS dengan penjelasan sederhana dan sedikit contoh xD.

See you next time..

Level artikel ini adalah beginner.
Dituliskan oleh Indra Daud (aidi) pada 14 Oktober 2015 dan telah dibaca sebanyak 37359 kali.
Tag: CSS, HTML

Beri Jempol · 66 jempol

berlangganan komentar
Bagi via Twitter Bagi via Facebook

Komentar:

sukhartono
192
0
· 9 tahun, 1 bulan yang lalu · 0 jempol 

mantab om ...ID
eh klo bole tau bedanya CSS ama BOOTSTRAP itu apa sih...?
sory maih newbie...kwkwkwkwk

aidi
192
30
penulis
· 9 tahun, 1 bulan yang lalu · 5 jempol 

tiada newbie diantara kita xD
bootstrap itu framework css. framework sendiri secara sederhanya bisa dikatakan sebagai kumpulan fungsi atau lebih kasarnya lagi kode yang sudah jadi. jadi, kita hnya perlu memanggil fungsi tersebut tanpa perlu menulis kode lagi.

sukhartono
192
0
· 9 tahun, 1 bulan yang lalu · 1 jempol 

makasih atas penjelasan nya bang.. @ID

ganis
198
841
· 9 tahun, 1 bulan yang lalu · 0 jempol 

Luar biasa sekali penjelasan tentang HTML dan CSS nya, Artikel ini telah ditautkan dengan unit pertama di PHP -> http://codesaya.com/php/selamat-...

Aldhitya
164
0
· 9 tahun, 1 bulan yang lalu · 0 jempol 

Apa kah itu adalah dasar utk membuat halaman website ??

aidi
192
30
penulis
· 9 tahun, 1 bulan yang lalu · 1 jempol 

@aldhiya
bisa dibilang seperti itu.

sopan.mukti
13
1
· 9 tahun, 1 bulan yang lalu · 1 jempol 

terimkasih atas penjelasnnya gan,btw bagaimana yaa,cara kita bisa dapet logic dari pemograman,info dari temen kampus ane jika kita ingin bisa pemograman selain harus tau dasarnya kita juga harus dapet logicnya,,
tapi sampai saat ini ane ga dapet2 logic dari pemograman tuh,,,pdaahal udah smetr 3 tapi ga bisa2...
mohon bantuannya?

aidi
192
30
penulis
· 9 tahun, 1 bulan yang lalu · 1 jempol 

@sopan
kyaknya pernah baca tutornya untuk php di salah satu forum (lupa xD), kodingnya kalo gk salah ada semacam konversi angka gitu. gk sempat ngikutin tutornya karna emang saya juga gak ngerti xD.

ganis
198
841
· 9 tahun, 1 bulan yang lalu · 0 jempol 

halo @sopan.mukti 

hmm... pemograman itu sebenernya seperti puzzle.. cara mengerjakannya menggunakan logika. Jika anda bisa mengerjakan puzzle, maka anda berarti bisa logika programming.

26071997
18
0
· 8 tahun, 8 bulan yang lalu · 0 jempol 

Garuk kepala nich...!!!

auf4R
300
5
· 7 tahun, 10 bulan yang lalu · 0 jempol 

Betul juga ya mas @aidi, HTML & CSS merupakan dasar dari front-end programming, makanya belajar dulu HTML dan CSS, terus bisa lanjut ke bahasa pemrograman lain.
Silahkan masuk untuk menulis artikel atau komentar.

Artikel Lainnya


Indra Daud

16 Oktober 2015

JavaScript dan PHP, Mengapa Berbeda ?

JavaScript dan PHP adalah dua bahasa pemprograman yang banyak direkomendasikan jika anda ingin belajar mengenai web programming karena keduanya cukup mudah untuk dipelajari serta tersedia banyak tutorial dan situs pembelajaran ...

Lanjutkan membaca

9 menit bacaan · beginner


Ganis

8 Oktober 2015

Hardware Virtualization, Pengenalan Singkat

Dalam post ini saya akan menjelaskan sesederhana mungkin apa itu hardware virtualization. Salah satu teknologi penyokong Cloud Computing adalah Hardware Virtualization. Hardware Virtualization adalah suatu teknik dimana seolah-olah terdapat lebih ...

Lanjutkan membaca

4 menit bacaan · beginner