Perbedaan html dengan css

perbedaan html dengan css

Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.

Apa itu html?

HTML adalah kependekan dari Hyper Text Markup Language yang artinya bahasa penandaan halaman web. Elemen HTML yang disebut dengan TAG digunakan untuk menyusun struktur isi halaman web.

HTML ditulis dengan struktur tertentu yang menginformasikan kepada browser tentang susunan isi halaman yang di tampilkan. Contoh :

<h1>Ini contoh Heading</h1>
<p>Ini adalah contoh sebuah paragraf dalam HTML</p>

dengan tag diatas, browser akan menampilkan isi dengan baris awal heading 1, dan baris kedua sebuah paragraf. Heading dianggap sebagai sebuah kata pembuka atau judul dari halaman, sedangkan paragraf adalah sebagai isi halaman.

HTML bisa berdiri sendiri tanpa ada pendukung lainya seperti css.

Apa itu css?

CSS adalah kependekan dari Cascading Style Sheet yang artinya pengatur gaya dokumen. CSS digunakan untuk mengatur tampilan struktur isi halaman web.

Karena css digunakan untuk mengatur tampilan struktur isi maka css harus mengacu pada elemen tertentu dari dokumen yang diformat. Sehingga penulisanya :

h1 { color : #000;font-size:20px; }
.tengah { text-align:center; }

Contoh css diatas digunakan untuk mengatur format semua elemen h1 sehinga ditampilkan dengan warna:#000 (hitam) dan font-size:20px (ukuran tulisan 20 pixel). Sedangkan .tengah adalah sebuah class yang dapat ditempelkan pada elemen tertentu seperti p, div, dll. Misal : <p class="tengah">..</p> sehingga furmat paragraf berubah menjadi rata tengah.

Kemampuan umum CSS

  1. Memformat banyak dokumen hanya dengan satu file css
  2. Mengatur susunan layout dokumen
  3. Mengatur tampilan dalam berbagai format output seperti printer, layar monitor, mobile dll
  4. Menambah fitur kontrol dokumen seperti show, hide, visible dll

Semoga bermanfaat

Zainal Hakim

 

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Membuat tulisan ditengah dalam halaman web
    Ada banyak cara untuk menempatkan sebuah text atau objek pada posisi tengah dalam halaman website bisa dengan perintah HTML biasa atau dengan teknologi CSS yang digunakan untuk menyusun tata layout halaman web.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat efek gambar dengan css
    CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list kita juga bisa gunakan untuk mengatur tampilan gambar.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru