Membuat Halaman Web Dengan HTML Dan CSS

View Categories

Membuat Halaman Web Dengan HTML Dan CSS

CSS adalah singkatan dari Cascading Style Sheets. Fungsi utama CSS adalah untuk mengatur tag-tag pada dokumen HTML dengan mudah. CSS hanya mengatur tampilan tag pada dokumen HTML, sedangkan fungsi tag tidak bisa diganti dengan menggunakan CSS. Membuat halaman Web dengan HTML dan CSS akan memudahkan kita untuk mengatur warna, jenis huruf, ukuran huruf, spasi di antara tag, posisi tag pada layar, latar belakang warna, latar belakang gambar dan lain sebagainya. CSS juga dapat digunakan untuk menyesuaikan tampilan tag apabila ditampilkan pada layar dengan ukuran yang berbeda-beda, atau lebih dikenal dengan istilah tampilan responsive.

Pada dasarnya pengerjaan CSS bukanlah tugas seorang programmer tapi adalah tugas seorang design web tapi seorang programmer juga sebaiknya tahu konsep CSS. Terdapat banyak jasa design web yang ada di internet, seperti contoh jasa desain website profesional di sribu.

Tutorial ini tidak akan membahas semua fungsi CSS, tapi hanya konsep dan fungsi-fungsi dasarnya saja.

Pengertian CSS dan Cara Kerjanya

Ada tiga cara membuat CSS di dalam dokumen HTML :

  • Secara inline, dengan menggunakan atribut style pada setiap tag pada dokumen HTML
  • Internal, dengan memakai tag style di dalam bagian tag head dokumen HTML
  • External, dengan memakai link URL kepada file dengan ekstensi .css

Css Inline

CSS inline dapat dibuat untuk setiap tag dengan menggunakan atribut style. Setiap tag akan mempunyai style sendiri-sendiri.

<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

Jalankan Contoh

Cara inline tidak begitu efektif untuk mengatur banyak tag karena atribut style harus ditulis satu persatu untuk semua tag di dalam dokumen HTML. Cara inline dipakai apabila ingin membuat CSS khusus untuk tag tertentu.

CSS Internal

CSS internal dapat dibuat di dalam tag head pada dokumen HTML. Dengan CSS internal dimungkinkan untuk membuat CSS pada beberapa tag sekaligus di dalam dokumen HTML.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<h1>This is another heading</h1>
<p>This is another paragraf.</p>

</body>
</html>

Jalankan Contoh

CSS internal dapat mengatur CSS untuk setiap tipe tag. Seperti ditunjukkan pada contoh di atas, semua tag h1 akan berwarna biru dan semua tag p akan berwarna merah.

CSS Eksternal

CSS eksternal dibuat dengan menyertakan link URL file berektensi .css di dalam dokumen HTML. CSS eksternal semakin efektif karena memungkinkan untuk mengatur semua tag pada beberapa file html yang berbeda-beda.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Jalankan Contoh

Dokumen HTML pada contoh di atas memperlihatkan link URL kepada file styles.css. Isi file styles.css sendiri dapat dilihat pada contoh di bawah ini.

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Link URL kepada styles.css dapat dipakai di dalam dokumen HTML lain. CSS eksternal lebih banyak dipakai untuk pengembangan aplikasi web. Tim design bertanggung jawab untuk membuat file styles.css. Tim web developer bisa memakai file styles.css tersebut di dalam setiap dokumen HTML yang mereka buat.

Beberapa Fungsi Dasar CSS

CSS mempunyai banyak fungsi untuk mengatur tampilan tag dalam dokumen HTML. Fungsi ini didefinisikan melalui properti CSS.

Mengatur Warna, Jenis dan Ukuran Huruf

Properti color digunakan untuk mengatur warna huruf suatu tag. Properti font-family digunakan untuk mengatur jenis huruf suatu tag. Properti font-size digunakan untuk mengatur ukuran huruf pada suatu tag.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Jalankan Contoh

Mengatur Border

Properti border dapat digunakan untuk mengatur border tag.

p {
  border: 2px solid powderblue;
}

Jalankan Contoh

Pada contoh di atas border semua tag p menjadi 2 pixel.

Mengatur Padding

Properti padding digunakan untuk mengatur jarak antara text atau tag dengan border tag tersebut.

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Jalankan Contoh

Mengatur Margin

Properti margin digunakan untuk mengatur jarak antara border suatu tag dengan tag lain.

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Jalankan Contoh

Tutorial sebelumnya : Cara Membuat Tabel Di HTML
Tutorial setelahnya : Tampilan Block Dan Inline
Semua Tutorial HTML : Tutorial HTML 

Tinggalkan Balasan