Skip to main content

Bab 1: Membangun Halaman Web Pertamamu

Jika memungkinkan, bayangkan sebuah masa sebelum Internet diciptakan. Website belum ada, dan buku—yang dicetak di atas kertas dan dijilid dengan rapi—merupakan sumber informasi utama. Dibutuhkan usaha yang cukup besar—serta banyak membaca—untuk menemukan informasi spesifik yang kamu cari.

Saat ini, kamu dapat membuka browser, menuju mesin pencari pilihanmu, lalu mulai mencari. Setiap potongan informasi yang bisa dibayangkan kini berada di ujung jarimu. Dan kemungkinan besar, seseorang di suatu tempat telah membangun sebuah website persis seperti yang kamu cari.

Di dalam buku ini, penulis akan menunjukkan bagaimana cara membangun website milikmu sendiri menggunakan dua bahasa komputer yang paling dominan—HTML dan CSS.

Sebelum kita memulai perjalanan belajar membangun website dengan HTML dan CSS, penting untuk memahami perbedaan antara kedua bahasa tersebut, sintaks dari masing-masing bahasa, serta beberapa istilah umum yang sering digunakan.

Apa Itu HTML dan CSS?​

HTML, HyperText Markup Language, memberikan struktur dan makna pada konten dengan mendefinisikan komponen seperti heading, paragraf, atau gambar. Sementara itu CSS, atau Cascading Style Sheets, adalah bahasa presentasi yang dibuat untuk mengatur tampilan konten—misalnya dengan menggunakan font atau warna.

Kedua bahasa tersebut independen satu sama lain dan seharusnya tetap demikian. CSS tidak boleh ditulis di dalam dokumen HTML, dan sebaliknya. Sebagai aturan, HTML akan selalu merepresentasikan konten, dan CSS akan selalu merepresentasikan tampilan dari konten tersebut.

Dengan pemahaman tentang perbedaan antara HTML dan CSS ini, mari kita masuk lebih dalam ke HTML.

Memahami Istilah Umum HTML​

Saat mulai mempelajari HTML, kamu kemungkinan akan menemui istilah-istilah baru—dan sering kali terasa asing. Seiring waktu, kamu akan semakin terbiasa dengan semuanya, tetapi tiga istilah HTML yang umum dan sebaiknya kamu pelajari terlebih dahulu adalah elements, tags, dan attributes.

Elemen​

Elemen adalah bagian yang mendefinisikan struktur dan konten dari objek-objek di dalam sebuah halaman. Beberapa elemen yang paling sering digunakan mencakup berbagai tingkat heading (diidentifikasi sebagai elemen <h1> hingga <h6>) dan paragraf (diidentifikasi sebagai elemen <p>); daftar ini juga mencakup elemen <a>, <div>, <span>, <strong>, dan <em>, serta masih banyak lagi.

Elemen diidentifikasi dengan penggunaan tanda kurung sudut kurang-dari dan lebih-dari, < >, yang mengapit nama elemen. Dengan demikian, sebuah elemen akan terlihat seperti berikut:

<a></a>

Tag​

Penggunaan tanda kurung sudut kurang-dari dan lebih-dari yang mengapit sebuah elemen menghasilkan apa yang disebut sebagai tag. Tag umumnya muncul dalam pasangan, yaitu tag pembuka dan tag penutup.

Tag pembuka menandai awal dari sebuah elemen. Tag ini terdiri dari tanda kurang-dari yang diikuti oleh nama elemen, lalu diakhiri dengan tanda lebih-dari; sebagai contoh, <div>.

Tag penutup menandai akhir dari sebuah elemen. Tag ini terdiri dari tanda kurang-dari yang diikuti oleh garis miring dan nama elemen, lalu diakhiri dengan tanda lebih-dari; sebagai contoh, </div>.

Konten yang berada di antara tag pembuka dan tag penutup merupakan konten dari elemen tersebut. Sebagai contoh, sebuah tautan (anchor link) akan memiliki tag pembuka <a> dan tag penutup </a>. Apa pun yang berada di antara kedua tag tersebut akan menjadi konten dari tautan tersebut.

Dengan demikian, tag tautan (anchor link) akan terlihat kurang lebih seperti ini:

<a>...</a>

Atribut​

Atribut adalah properti yang digunakan untuk memberikan informasi tambahan tentang sebuah elemen. Atribut yang paling umum meliputi atribut id, yang mengidentifikasi sebuah elemen; atribut class, yang mengelompokkan sebuah elemen; atribut src, yang menentukan sumber untuk konten yang dapat disematkan; serta atribut href, yang menyediakan referensi hyperlink ke sumber yang ditautkan.

Atribut didefinisikan di dalam tag pembuka, setelah nama elemen. Umumnya, atribut terdiri dari sebuah nama dan sebuah nilai. Format atribut ini terdiri dari nama atribut yang diikuti tanda sama dengan, kemudian nilai atribut yang ditulis di dalam tanda kutip. Sebagai contoh, sebuah elemen <a> yang menyertakan atribut href akan terlihat seperti berikut:

<a href="http://shayhowe.com/">Shay Howe</a>

Contoh Praktis​

Berikut adalah contoh interaktif yang menunjukkan penggunaan elemen, tag, dan atribut HTML:

Kode di atas akan menampilkan teks “Shay Howe” pada halaman web dan akan membawa pengguna ke http://shayhowe.com ketika teks “Shay Howe” diklik. Elemen tautan dideklarasikan dengan tag pembuka <a> dan tag penutup </a> yang mengapit teks tersebut, sedangkan atribut dan nilai referensi hyperlink dideklarasikan dengan href="http://shayhowe.com" pada tag pembuka.

Sekarang setelah kamu mengetahui apa itu elemen, tag, dan atribut HTML, mari kita melihat bagaimana cara menyusun halaman web pertama kita. Jika ada bagian yang terlihat baru di sini, tidak perlu khawatir—kita akan menguraikannya satu per satu.

Menyiapkan Struktur Dokumen HTML​

Dokumen HTML adalah dokumen teks biasa yang disimpan dengan ekstensi file .html, bukan .txt. Untuk mulai menulis HTML, kamu terlebih dahulu membutuhkan editor teks biasa yang nyaman untuk digunakan. Sayangnya, ini tidak termasuk Microsoft Word atau Pages, karena keduanya merupakan rich text editor. Beberapa editor teks biasa yang cukup populer untuk menulis HTML dan CSS adalah Sublime Text, Visual Studio Code atau yang sejenisnya. Alternatif gratis juga tersedia, seperti Notepad++ untuk Windows dan TextWrangler untuk Mac.

Semua dokumen HTML memiliki struktur wajib yang mencakup deklarasi dan elemen berikut: <!DOCTYPE html>, <html>, <head>, dan <body>.

Deklarasi tipe dokumen, atau <!DOCTYPE html>, memberi tahu browser web versi HTML yang sedang digunakan dan ditempatkan di bagian paling awal dokumen HTML. Karena kita akan menggunakan versi HTML terbaru, deklarasi tipe dokumen kita cukup berupa <!DOCTYPE html>. Setelah deklarasi tipe dokumen, elemen <html> menandai awal dari dokumen.

Di dalam elemen <html>, elemen <head> menandai bagian atas dokumen, termasuk metadata (informasi pendukung tentang halaman yang bersangkutan). Konten di dalam elemen <head> tidak ditampilkan pada halaman web itu sendiri. Sebaliknya, bagian ini dapat mencakup judul dokumen (yang ditampilkan pada bilah judul jendela browser atau istilah lainnya browser tab), tautan ke file eksternal, atau metadata lain yang bermanfaat.

Seluruh konten yang terlihat pada halaman web akan berada di dalam elemen <body>. Gambaran struktur dokumen HTML yang umum akan terlihat seperti berikut:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a web page.</p>
    </body>
</html>

Contoh Struktur Dokumen HTML​

Contoh di atas menunjukkan dokumen yang diawali dengan deklarasi tipe dokumen, <!DOCTYPE html>, yang langsung diikuti oleh elemen <html>. Di dalam elemen <html> terdapat elemen <head> dan <body>. Elemen <head> memiliki pengodean karakter halaman melalui tag <meta charset="utf-8"> serta judul dokumen melalui elemen <title>. Elemen <body> memiliki sebuah heading melalui elemen <h1> dan sebuah paragraf melalui elemen <p>. Karena heading dan paragraf berada di dalam elemen <body>, keduanya terlihat pada halaman web.

Ketika sebuah elemen ditempatkan di dalam elemen lain, yang juga dikenal sebagai nested, sebaiknya elemen tersebut diberi indentasi agar struktur dokumen tetap rapi dan mudah dibaca. Pada kode sebelumnya, elemen <head> dan <body> sama-sama diberi indentasi di dalam elemen <html>. Pola indentasi untuk elemen-elemen ini akan terus berlanjut seiring ditambahkannya elemen baru ke dalam elemen <head> dan <body>.

tip

Self-Closing Elements (Elemen yang Tidak Memiliki Penutup)​

Pada contoh sebelumnya, elemen <meta> hanya memiliki satu tag dan tidak menyertakan tag penutup. Tidak perlu khawatir, hal ini memang disengaja. Tidak semua elemen terdiri dari tag pembuka dan tag penutup. Beberapa elemen hanya menerima konten atau perilakunya melalui atribut di dalam satu tag saja. Elemen <meta> adalah salah satu contoh. Konten dari elemen <meta> sebelumnya ditentukan melalui penggunaan atribut dan nilai charset.

Elemen self-closing lain yang umum digunakan antara lain:

  • <br>
  • <embed>
  • <hr>
  • <img>
  • <input>
  • <link>
  • <meta>
  • <param>
  • <source>
  • <wbr>

Struktur yang dijelaskan di sini, yang menggunakan tipe dokumen <!DOCTYPE html> serta elemen <html>, <head>, dan <body>, cukup umum digunakan. Kita sebaiknya menyimpan struktur dokumen ini sebagai acuan, karena akan sering digunakan saat membuat dokumen HTML baru.

tip

Validasi Kode​

Tidak peduli seberapa berhati-hatinya kita saat menulis kode, kesalahan tetap tidak dapat dihindari. Untungnya, ketika menulis HTML dan CSS kita memiliki validator untuk memeriksa pekerjaan kita. W3C telah menyediakan validator HTML dan CSS yang akan memindai kode untuk menemukan kesalahan. Memvalidasi kode tidak hanya membantu kode di-render dengan benar di berbagai browser, tetapi juga membantu kita mempelajari cara terbaik dalam penulisan kode.

Studi Kasus​

Sebagai web designer dan front-end developer, kita memiliki keuntungan dapat menghadiri berbagai konferensi hebat yang didedikasikan untuk bidang kita. Oleh karena itu kita akan belajar untuk bisa membuat desain halamen web untuk konferensi versi kita sendiri, Styles Conference namanya. Kita akan membangun website untuk konferensi tersebut sepanjang pelajaran-pelajaran di buku ini. Mari kita mulai!

  1. Mari kita buka Sublime atau Visual Studio Code, buat file baru bernama index.html, dan simpan di lokasi yang diinginkan. Penulis akan membuat sebuah folder di Desktop dengan nama “styles-conference” dan menyimpan file tersebut di sana; silakan lakukan hal yang sama jika diinginkan.

  2. Di dalam file index.html, mari kita tambahkan struktur dokumen, termasuk tipe dokumen <!DOCTYPE html> serta elemen <html>, <head>, dan <body>.

<!DOCTYPE html>
<html lang="en">
    <head> </head>
    <body></body>
</html>
  1. Di dalam elemen <head>, tambahkan <meta> dan <title>. Elemen <meta> perlu ditambahkan atribut charset sementara elemen <title> perlu memiliki judul halaman tersebut, misalkan "Styles Conference".
<head>
    <meta charset="utf-8" />
    <title>Styles Conference</title>
</head>
  1. Di dalam elemen <body>, tambahkan <h1> dan <p>. Elemen <h1> harus memiliki judul yang ingin kita tampilkan dan dibaca pengunjung, mari kita pakai kembali "Styles Conference". Untuk elemen <p> kita isi dengan paragraf sederhana yang mendeskripsikan konferensi tersebut.
<body>
    <h1>Styles Conference</h1>
    <p>
        Every year the brightest web designers and front-end developers descend
        on Chicago to discuss the latest technologies. Join us this August!
    </p>
</body>
  1. Sekarang mari kita lihat hasilnya! Buka file index.html dengan cara klik dua kali atau dengan drag ke browser.

Sekarang kita coba pindah haluan dari HTML dan mengenal CSS. Ingat, HTML hanya menentukan struktur dan konten dari halaman web kita, CSS lah yang akan menentukan tampilannya seperti apa.

Memahami Istilah Umum dalam CSS​

Selain istilah-istilah HTML, ada beberapa istilah CSS umum yang perlu kamu kenali. Istilah-istilah tersebut meliputi selectors, properties, dan values. Seperti halnya terminologi HTML, semakin sering kamu bekerja dengan CSS, semakin alami istilah-istilah ini akan kamu pahami.

Selector​

Ketika elemen-elemen ditambahkan ke dalam sebuah halaman web, elemen-elemen tersebut dapat diberi aturan CSS. Sebuah selector menentukan secara tepat satu elemen atau banyak elemen dalam HTML yang akan ditargetkan dan diatur tampilannya (seperti warna, ukuran, dan posisi). Sebagai contoh, kita mungkin ingin memilih setiap paragraf pada sebuah halaman, atau hanya satu paragraf tertentu saja.

Selector umumnya menargetkan nilai atribut, seperti nilai id atau class, atau menargetkan jenis elemen, seperti <h1> atau <p>.

Dalam CSS, selector diikuti oleh tanda kurung kurawal, {}, yang membungkus aturan-aturan yang akan diterapkan pada elemen yang dipilih. Selector pada contoh ini menargetkan semua elemen <p>.

p {
    ...;
}

Properti​

Setelah sebuah elemen dipilih, sebuah property menentukan aturan yang akan diterapkan pada elemen tersebut. Nama properti dituliskan setelah selector, di dalam tanda kurung kurawal {}, dan tepat sebelum tanda titik dua :. Ada banyak properti yang dapat digunakan, seperti background, color, font-size, height, dan width, dan properti baru pun sering ditambahkan. Pada kode berikut, kita mendefinisikan properti color dan font-size untuk diterapkan pada semua elemen <p>.

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

Value​

Sejauh ini kita telah memilih sebuah elemen menggunakan selector dan menentukan gaya yang ingin diterapkan melalui sebuah property. Sekarang kita dapat menentukan perilaku dari properti tersebut menggunakan sebuah value. Nilai dapat dikenali sebagai teks yang berada di antara tanda titik dua : dan tanda titik koma ;. Pada contoh ini, kita memilih semua elemen <p> dan menetapkan nilai properti color menjadi oranye serta nilai properti font-size menjadi 16 piksel.

p {
    color: orange;
    font-size: 16px;
}

Sebagai pengingat, dalam CSS semua dimulai dengan selector yang diikuti oleh tanda kurung kurawal. Di dalam tanda kurung kurawal tersebut terdapat deklarasi yang terdiri dari pasangan properti dan sebuah value. Setiap deklarasi diawali dengan properti, yang kemudian diikuti oleh tanda titik dua, nilai properti, dan diakhiri dengan tanda titik koma.

Merupakan praktik yang umum untuk memberikan indentasi pada pasangan properti dan nilai di dalam tanda kurung kurawal. Seperti halnya pada HTML, indentasi ini membantu menjaga kode tetap terstruktur dan mudah dibaca.

Mengetahui beberapa istilah umum dan sintaks dasar CSS merupakan awal yang baik, tetapi masih ada beberapa hal lagi yang perlu dipelajari sebelum melangkah lebih jauh. Secara khusus, kita perlu melihat lebih dekat bagaimana selector bekerja di dalam CSS.

Bekerja dengan Selector​

Selector, seperti yang telah disebutkan sebelumnya, menunjukkan elemen HTML mana yang akan diberi gaya. Penting untuk benar-benar memahami cara menggunakan selector dan bagaimana selector dapat dimanfaatkan. Langkah pertama adalah mengenal berbagai jenis selector. Kita akan mulai dengan selector yang paling umum: selector tipe, kelas, dan ID.

Type Selector​

Type selector menargetkan elemen berdasarkan jenis elemennya. Sebagai contoh, jika kita ingin menargetkan semua elemen <div>, kita akan menggunakan type selector div. Kode berikut menunjukkan sebuah type selector untuk elemen div beserta HTML yang ditargetkannya.

CSS

div {
    ...;
}

HTML

<div>...</div>
<div>...</div>

Class Selector​

Class selector memungkinkan kita memilih sebuah elemen berdasarkan nilai atribut class milik elemen tersebut. Selector class sedikit lebih spesifik dibandingkan type selector, karena selector ini memilih kelompok elemen tertentu, bukan semua elemen yang sejenis.

Class selector memungkinkan kita menerapkan aturan yang sama ke berbagai elemen sekaligus dengan menggunakan nilai atribut class yang sama pada beberapa elemen.

Di dalam CSS, class ditandai dengan tanda titik di depan, ., yang diikuti oleh nilai atribut class. Pada contoh ini, selector class akan memilih elemen apa pun yang memiliki nilai atribut class awesome, termasuk elemen division dan paragraf.

CSS

.awesome {
    ...;
}

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

ID Selector​

ID selector bahkan lebih spesifik dibandingkan class selector, karena selector ini hanya menargetkan satu elemen unik dalam satu waktu. Sama seperti class selector yang menggunakan nilai atribut class suatu elemen sebagai selector, ID selector menggunakan nilai atribut id suatu elemen sebagai selector.

Terlepas dari jenis elemen tempatnya digunakan, nilai atribut id hanya boleh digunakan satu kali dalam satu halaman. Jika digunakan, atribut ini sebaiknya diperuntukkan bagi elemen-elemen yang bersifat penting.

Di dalam CSS, ID selector ditandai dengan tanda pagar di depan, #, yang diikuti oleh nilai atribut id. Pada contoh ini, ID selector hanya akan memilih elemen yang memiliki nilai atribut id shayhowe.

CSS

#shayhowe {
    ...;
}

HTML

<div id="shayhowe">...</div>

Selector Lain​

Selector sangatlah hebat, dan selector yang dijelaskan di sini merupakan selector yang paling umum akan kita temui. Selector-selector ini juga baru merupakan permulaan. Masih banyak selector yang lebih canggih dan tersedia untuk digunakan. Ketika kamu sudah merasa nyaman dengan selector-selector ini, jangan ragu untuk mempelajari beberapa selector lain.

Baik, sekarang setelah semuanya mulai terbayang. Kita menambahkan elemen ke dalam sebuah halaman melalui HTML, lalu kita dapat memilih elemen-elemen tersebut dan menerapkan aturan menggunakan CSS untuk mendapat tampilan yang dikehendaki. Sekarang mari kita hubungkan HTML dan CSS, dan membuat kedua bahasa ini bekerja sama.

Mereferensikan CSS​

Untuk membuat CSS terhubung dengan HTML, kita perlu mereferensikan file CSS di dalam HTML. Cara terbaik untuk mereferensikan CSS adalah dengan menempatkan seluruh gaya dalam satu external style sheet, yang direferensikan dari dalam elemen <head> pada dokumen HTML. Menggunakan satu external style sheet memungkinkan kita menerapkan gaya yang sama ke seluruh website dan dengan cepat melakukan perubahan secara menyeluruh.

tip

Opsi Lain untuk Menambahkan CSS​

Opsi lain untuk mereferensikan CSS meliputi penggunaan internal dan inline styles. Kamu mungkin akan menemui opsi-opsi ini di lapangan, tetapi secara umum keduanya kurang disarankan karena membuat proses pembaruan website menjadi rumit dan sulit dikelola.

Untuk membuat external CSS style sheet, kita perlu kembali menggunakan editor teks pilihan kita untuk membuat file teks biasa baru dengan ekstensi .css. File CSS sebaiknya disimpan di dalam folder yang sama, atau di subfolder, tempat file HTML berada.

Di dalam elemen <head> pada dokumen HTML, elemen <link> digunakan untuk mendefinisikan hubungan antara file HTML dan file CSS. Karena kita menautkan CSS, kita menggunakan atribut rel dengan nilai stylesheet untuk menentukan hubungan tersebut. Selain itu, atribut href (hyperlink reference) digunakan untuk menunjukkan lokasi, atau path, dari file CSS.

Perhatikan contoh berikut dari elemen <head> pada dokumen HTML yang mereferensikan satu external style sheet.

<head>
    <link rel="stylesheet" href="main.css" />
</head>

Agar CSS dapat dirender dengan benar, path pada nilai atribut href harus sesuai secara langsung dengan lokasi tempat file CSS disimpan. Pada contoh sebelumnya, file main.css disimpan di lokasi yang sama dengan file HTML, yang juga dikenal sebagai root directory.

Jika file CSS berada di dalam subdirektori atau subfolder, nilai atribut href perlu disesuaikan dengan path tersebut. Sebagai contoh, jika file main.css disimpan di dalam subdirektori bernama stylesheets, maka nilai atribut href adalah stylesheets/main.css, dengan menggunakan garis miring ke depan untuk menunjukkan perpindahan ke dalam subdirektori.

Pada tahap ini, halaman-halaman kita mulai terlihat hidup, sedikit demi sedikit. Kita memang belum terlalu jauh membahas CSS, tetapi kamu mungkin menyadari bahwa beberapa elemen memiliki gaya bawaan yang belum kita deklarasikan di dalam CSS. Hal tersebut terjadi karena browser menerapkan gaya CSS pilihannya sendiri pada elemen-elemen tersebut. Untungnya, gaya-gaya ini dapat kita timpa dengan cukup mudah, yang akan kita lakukan selanjutnya menggunakan CSS resets.

Menggunakan CSS Reset​

Setiap browser web memiliki gaya bawaan sendiri untuk berbagai elemen. Cara Google Chrome merender heading, paragraf, daftar, dan sebagainya bisa berbeda dengan cara Internet Explorer melakukannya. Untuk memastikan kompatibilitas lintas browser, CSS reset banyak digunakan.

CSS reset mengambil setiap elemen HTML umum yang memiliki gaya bawaan dan memberikan satu gaya yang seragam untuk semua browser. Reset ini umumnya melibatkan penghapusan ukuran, margin, padding, atau gaya tambahan lainnya, serta menormalkan nilai-nilai tersebut. Karena CSS bersifat cascade dari atas ke bawah—yang akan dibahas lebih lanjut nanti—reset perlu ditempatkan di bagian paling atas dari style sheet. Dengan begitu, gaya-gaya tersebut dirposes terlebih dahulu dan semua browser web bekerja dari dasar yang sama.

Ada banyak jenis reset yang tersedia untuk digunakan, masing-masing dengan keunggulannya sendiri. Salah satu reset yang paling populer adalah reset karya Eric Meyer, yang telah diadaptasi untuk menyertakan gaya bagi elemen-elemen HTML5 yang baru.

Jika kamu merasa ingin mencoba sesuatu yang lebih menantang, ada juga Normalize.css, yang dibuat oleh Nicolas Gallagher. Normalize.css tidak berfokus pada penggunaan reset keras untuk semua elemen umum, melainkan pada penetapan gaya umum bagi elemen-elemen tersebut. Pendekatan ini membutuhkan pemahaman CSS yang lebih kuat, serta kesadaran tentang gaya seperti apa yang ingin kamu terapkan.

tip

Kompatibilitas Lintas Browser & Pengujian​

Seperti yang telah disebutkan sebelumnya, browser yang berbeda merender elemen dengan cara yang berbeda. Penting untuk menyadari nilai dari kompatibilitas lintas browser dan pengujian. Website tidak harus terlihat persis sama di setiap browser, tetapi seharusnya cukup mendekati. Browser mana yang ingin kamu dukung, dan sejauh apa tingkat dukungannya, merupakan keputusan yang perlu kamu tentukan berdasarkan apa yang paling baik untuk website kamu.

Secara keseluruhan, ada beberapa hal yang perlu diperhatikan saat menulis CSS. Kabar baiknya, segalanya memungkinkan, dan dengan sedikit kesabaran kita akan bisa memahami semuanya.

Praktik Studi Kasus​

Mari kita lanjutkan lagi mengerjakan website konferensi yang sebelumnya dengan menambahkan sedikit CSS.

  1. Di dalam folder “styles-conference”, mari kita buat folder baru bernama “assets”. Kita akan menyimpan semua aset untuk website kita, seperti file css, gambar, video, dan sebagainya, di dalam folder ini. Untuk css, mari tambahkan satu folder lagi bernama “stylesheets” di dalam folder “assets”.

  2. Dengan menggunakan editor teks, mari kita buat file baru bernama main.css dan simpan di dalam folder “stylesheets” yang baru saja kita buat.

  3. Melihat file index.html kita di browser, kita dapat melihat bahwa elemen <h1> dan <p> masing-masing memiliki gaya CSS bawaan. Secara khusus, keduanya memiliki ukuran font dan jarak di sekelilingnya yang berbeda. Dengan menggunakan reset dari Eric Meyer, kita dapat menormalkan gaya-gaya ini, sehingga setiap elemen dapat diberi gaya dari dasar yang sama. Untuk melakukannya, mari kita kunjungi situs Eric, salin reset miliknya, lalu tempelkan di bagian paling atas file main.css kita.

/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
  License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

  1. Dengan file main.css yang mulai terbentuk, mari kita hubungkan file tersebut ke file index.html. Buka file index.html di editor teks, lalu tambahkan elemen <link> di dalam elemen <head>, tepat setelah elemen <title>.

  2. Karena kita akan mereferensikan sebuah file css melalui elemen <link>, mari tambahkan atribut rel dengan value stylesheet.

  3. Kita juga perlu menyertakan referensi hyperlink menggunakan atribut href ke file main.css. Ingat, file main.css disimpan di dalam folder “stylesheets”, yang berada di dalam folder “assets”. Oleh karena itu, nilai atribut href, yaitu path menuju file main.css, harus berupa assets/stylesheets/main.css.

<head>
    <meta charset="utf-8" />
    <title>Styles Conference</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css" />
</head>

Waktunya kita lihat kembali hasil dari kerjasama HTML dan CSS. Buka file index.html (atau refresh halaman jika sudah dibuka) dengan browser untuk mendapaktan haisl yang sedikit berbeda dari sebelumnya.

Demo dan Source Code​

Berikut ini contoh utuh dari studi kasus yang sudah dilakukan bila kamu mengalami kesulitan saat mengaplikasikannya.

Lihat hasilnya di sini atau Download source code di sini

Ringkasan​

Sejauh ini semuanya berjalan dengan baik! Kita telah mengambil beberapa langkah besar dalam pelajaran ini.

Bayangkan saja, sekarang kamu sudah memahami dasar-dasar HTML dan CSS. Seiring kita melanjutkan pembahasan dan kamu menghabiskan lebih banyak waktu menulis HTML dan CSS, kamu akan semakin nyaman menggunakan kedua bahasa tersebut.

Sebagai rangkuman, sejauh ini kita telah membahas hal-hal berikut:

  • Perbedaan antara HTML dan CSS
  • Mengenal elemen, tag, dan atribut HTML
  • Menyiapkan struktur halaman web pertamamu
  • Mengenal selector, properti, dan nilai dalam CSS
  • Bekerja dengan selector CSS
  • Mereferensikan CSS di dalam HTML
  • Pentingnya CSS reset

Sekarang mari kita melihat HTML dengan lebih dekat dan mempelajari sedikit tentang semantik.