Apa perbedaan bahasa css dan html?

Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web. Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana, agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.
Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan antara HTML dan CSS:

HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik.
CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.

Contoh sederhananya, sebuah paragraf teks direpresentasikan dengan penanda lstinline{p} pada HTML. Memberikan penanda lstinline{p} pada konten dalam HTML berarti menandakan konten tersebut berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal yang membuat dokumen HTML menjadi, emph{well}, dokumen HTML.

Elemen, Tag, dan Atribut

Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang harus diketahui ketika menulis HTML. Ketiga istilah tersebut ialah elemen, tag, dan atribut.

Elemen

Elemen HTML merupakan komponen yang menetapkan peran sebuah objek dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh dari sebuah elemen HTML ialah

<a>Ini adalah sebuah link</a>

1 ataupun

<a>Ini adalah sebuah link</a>

2 yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya

<a>Ini adalah sebuah link</a>

3.
Kode di bawah menunjukkan contoh dari elemen

<a>Ini adalah sebuah link</a>

4 yang digunakan untuk membuat hyperlink ke halaman lain:

<a>

Table of Contents Show

Elemen, Tag, dan Atribut
Struktur Dokumen HTML
Sintaks CSS
Mengimplementasikan CSS pada HTML
Contoh Ordered List:
Apa beda bahasa HTML dengan bahasa PHP dan CSS?
Apa Perbedaan HTML CSS dan JavaScript?
CSS termasuk bahasa apa?
HTML & CSS itu apa?

Tag

Sebuah elemen biasanya direpresentasikan oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama elemen yang diapit simbol “<>”, contohnya

<a>Ini adalah sebuah link</a>

5. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen

<a>Ini adalah sebuah link</a>

4 adalah

<a>Ini adalah sebuah link</a>

7.
Berikut adalah contoh pengunaan tag

<a>Ini adalah sebuah link</a>

4 untuk membuat sebuah link:

<a>Ini adalah sebuah link</a>

Atribut

Atribut merupakan informasi tambahan yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat digunakan oleh semua elemen.
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen

<a>Ini adalah sebuah link</a>

9 yang digunakan untuk menampilkan gambar, terdapat atribut untuk menentukan di mana sumber gambar yang akan ditampilkan di simpan. Atribut ini tentunya tidak akan berguna untuk elemen

<a>Ini adalah sebuah link</a>

1, yang hanya menampilkan teks.
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen

<a>Ini adalah sebuah link</a>

4 yang digunakan dengan atribut wajib elemen tersebut (

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

2):

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

Kode di atas memberikan contoh atribut

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

2 yang dimiliki oleh elemen

<a>Ini adalah sebuah link</a>

4. Atribut ini berguna untuk memberikan referensi hyperlink dari sebuah elemen (karenanya namanya “href” - hyperlink reference). Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih lanjut ketika pembahasan dari sebuah elemen dilakukan.

Struktur Dokumen HTML

Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi. Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat pada kode di bawah:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

Apa arti dari struktur tersebut? Mari kita lihat satu per satu.
Elemen DOCTYPEDigunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.Elemen HTMLElemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.Elemen headElemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.Elemen titleMemberikan judul dokumen.Elemen bodyElemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.Untuk lebih jelasnya, buat sebuah file dengan nama

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

5 yang berisi kode berikut:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada browser).

Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan

Gambar menunjukkan hasil tampilan dari kode pada

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

5, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan browser.
Pada gambar dapat dilihat bahwa elemen

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

7 ditampilkan pada bagian atas browser, dan isi dari

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

8 ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen

<a>Ini adalah sebuah link</a>

1 pertama dengan elemen

<a>Ini adalah sebuah link</a>

1 kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat membaca bahwa terdapat dua paragraf, dan biasanya dua paragraf yang berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada bagian , jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar

<a>Ini adalah sebuah link</a>

1 berbeda dengan jarak antara

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

2 dengan

<a>Ini adalah sebuah link</a>

1. Hal ini dikarenakan elemen

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

2, sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi jarak yang lebar antara elemen

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

2 dengan elemen-elemen lainnya).

Dasar CSS

Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya.

Selector

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen

<a>Ini adalah sebuah link</a>

1 yang ada pada dokumen HTML:

p {
    ....
}

Pada kode di atas, yang dikatakan selector ialah kode “

<a>Ini adalah sebuah link</a>

1”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

8”.
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen

<a>Ini adalah sebuah link</a>

1 yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab.

Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p {
    color: ...;
    font-size: ...;
}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

0”). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

1 untuk memberikan warna pada elemen

<a>Ini adalah sebuah link</a>

1, dan

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

3 untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.

Value

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

4 (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

5 atau

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

6. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:

p {
    color: #FFFF00;
    font-size: 50px;
}

Sintaks CSS

Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

Penyingkatan Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

/*
    Bentuk Panjang
*/
p {
    margin-top    : 10px;
    margin-right  : 20px;
    margin-bottom : 10px;
    margin-left   : 20px;
}

/*
    Bentuk Singkat (1)
*/
p {
    margin: 10px 20px;
}

/*
    Bentuk Singkat (2)
*/
p {
    margin: 10px;
}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.

Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:
Referensi ke File EksternalKita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.Penulisan CSS pada Elemen HeadCSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

7 dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

7 akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.CSS di dalam Atribut style pada ElemenMenuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
    <!-- Referensi pada Elemen Head -->
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>

    <!-- Referensi pada file eksternal -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>

    <!-- CSS langsung pada atribut style -->
    <p style="font-weight: bold;">
        Paragraf kedua.
    </p>
  </body>
</html>

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

9 yang direferensikan oleh elemen

p {
    ....
}

0 pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama

p {
    ....
}

1, dan kemudian buat sebuah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

9 di dalam direktori yang sama dengan

p {
    ....
}

1. Isikan file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

9 dengan kode berikut:

<a>Ini adalah sebuah link</a>

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

9 harus berada di dalam direktori yang sama karena atribut

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

2 diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan

p {
    ....
}

7 pada atribut

<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>

2.
Setelah selesai menyimpan

p {
    ....
}

1 dan

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Pengenalan HTML</title>
  </head>
  <body>
    <h1>Berita Utama</h1>
    <p>
        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).
        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.
    </p>
    <p>
        Paragraf kedua.
    </p>
  </body>
</html>

9, jalankan

p {
    ....
}

1 dan lihat hasilnya, seperti pada gambar berikut:

Hasil Eksekusi referensi-css.html

Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak memiliki CSS:

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar . Teks pada elemen

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>...</title>
  </head>
  <body>
    ...
  </body>
</html>

2 berubah menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak tebal karena CSS yang berada di atribut

p {
    color: ...;
    font-size: ...;
}

3 pada paragraf kedua. Ketiga CSS yang terpisah tersebut berjalan dengan baik.
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).

Ordered list adalah suatu daftar dalam HTML dimana terdapat item-item terurut atau memiliki nomor secara urut dalam sebuah daftar. Ordered list dimulai dengan tag awal

dan diakhiri dengan tag. Ditengah-tengah tag tersebut kita menuliskan list atau daftar. Tag untuk menuliskan list adalah

. Berikut contoh penggunaan tag tersebut.

Contoh Ordered List:

Tutorial Pemrograman C++
Tutorial Pemrograman Java
Tutorial Pemrograman VB 2008
Tutorial Pemrograman SQL
Tutorial Pemrograman Web

Silahkan kalian simpan file tersebut, lalu buka dalam browser. Jangan lupa format filenya adalah .html. Adapun tag ordered list ini memiliki beberapa atribut seperti yang terlihat dalam gambar dibawah: Untuk lebih jelasnya, kalian dapat melihat contoh dibawah ini:

Keyboard
Mouse
Cooling Pad
Flash Disk

Silahkan ganti tipe atribut diatas dengan yang terdapat dalam gambar. Selanjutnya kita akan masuk pada tahap pembuatan unordered list dalam HTML. Unordered list sendiri adalah suatu daftar dalam HTML yang tidak diurutkan, jadi penempatan item-itemnya tidak harus terurut. Lihatlah contoh kode berikut, lalu jalankan dalam browser.

Unordered List

Gitar
Bass
Drum

Unordered list ini juga memiliki atribut seperti yang terlihat dalam gambar dibawah ini: Secara default, jika kalian tidak memberikan atribut pada tag

Contoh Kombinasi Ordered List dan Unordered List:

Kopi
- Arabika
- Capucino
Teh
- Teh hitam
- Teh hijau
Susu

Apa beda bahasa HTML dengan bahasa PHP dan CSS?

Jadi intinya, perbedaan diantara ketiganya adalah : HTML merupakan dasar suatu halaman web untuk menampilkan segala informasi. CSS adalah penunjang HTML agar tampilan HTML menjadi lebih bagus dan menarik. Dan PHP digunakan sebagai controller, biasanya sebagai perantara halaman web dengan database.

Apa Perbedaan HTML CSS dan JavaScript?

Namun perbedaan Javascript dengan CSS adalah, Javascript mengatur logika seperti validasi untuk membuat tampilan website lebih dinamis dan CSS mengatur tampilan dari website tersebut seperti gambar, warna , font, dll.

CSS termasuk bahasa apa?

Kata Tech Terms, CSS adalah salah satu styling language (bahasa desain), bagian dari markup language yang dapat “mewarnai” atau mendesain suatu halaman website. CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML.

HTML & CSS itu apa?

html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan konten website pada file ini. Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website.