Breaking News

pengenalan html dan css

08:19

Apa itu HTML dan CSS 

Hasil gambar untuk HTML DAN CSS

A.Pengertian
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.
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
B.Latar Belakang 
Dunia web saat ini tentunya tidak akan terlepas dengan yang namanya HTML. Selain itu agar desain web menjadi indah diperlukannya CSS yang integrasi dalam kode HTML.
C.Maksud dan Tujuan 
Agar pembaca mengetahui apa itu HTML dan CSS 
D.Pembahasan 

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.

E.Kesimpulan
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.

F.Referensi 
https://codesaya.com/a/pengenalan-html-dan-css-vxvqxfltiz/



No comments

Subscribe to: Post Comments ( Atom )