Pengertian dan Fungsi dari HTML dan CSS


Html Dan CSS

1.HTML


Apasih yang dimaksud dengan HTML?


         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


2.CSS

Apasih itu Css ? Kenapa Html itu perlu Css?

      
       Cascading Style Sheets (CSS) merupakan bahasa pemrograman yang digunakan untuk menentukan bagaimana dokumen dan website akan disajikan atau bisa di katakan css ini seperti desain rumah dari kerangka rumah.
 










Kenapa sih kita sangat perlu 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.


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.



Oke,See You Next Time 

Komentar

Postingan populer dari blog ini

Mengelola Waktu dengan Jasa Konstruksi Rumah