Memulai dengan HTML & CSS

Selamat datang di dunia HTML & CSS yang seru!

Pada pelajaran ini, kita akan membuat situs web yang ditampilkan pada gambar di bawah.
Kelihatannya mungkin sulit, namun jangan khawatir! Kami akan memandu Anda di setiap langkahnya.

Apa itu HTML & CSS?

Sebagian besar situs web dibuat dengan bahasa yang disebut HTML dan CSS. Dengan mempelajari
dua bahasa ini, Anda akan dapat membuat situs web seperti gambar dibawah.

1. Memulai dengan HTML

Cara Kerja HTML

Mari kita mulai pelajaran kita dengan HTML!
Aturan pertama penulisan code HTML adalah mengapit teks dengan tag. Tag dapat memberikan arti
seperti judul atau tautan pada teks.
Tag pembuka dan Tag Penutup
Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks
disisipkan di antara keduanya. Saat menggunakan tag penutup, pastikan untuk meletakkan /.

2. Judul dan Paragraf

Tag Judul
Tag judul digunakan untuk memformat element judul.
Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi yang terbesar dan <h6> menjadi yang
terkecil (※ h mewakili heading (judul)).

Tag Paragraf
Tag <p> menentukan paragraf (※ p mewakili paragraf). Teks yang diapit oleh tag
seperti <h2> dan <p> dimulai di baris baru.
Menggunakan Judul dan Paragraf
Tag <h1>...<h6> digunakan sesuai ukuran dan signifikansi judul seperti ditunjukkan di bawah.
Untuk teks yang bukan merupakan judul, gunakan tag <p>.

Komentar
Teks yang diapit oleh <!-- --> menjadi komentar.
Komentar tidak ditampilkan di browser. Komentar sangat berguna untuk menjelaskan code Anda.

3. Tautan

Tag Tautan (1)

Anda dapat dengan mudah membuat tautan dengan tag <a> (※ a mewakili anchor (penambat)).
Teks dalam tag <a> ditampilkan di browser sebagai teks tautan.
Tag Tautan (2)
Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan
di element <a> dengan menambahkan atribut href . Seperti yang ditampilkan pada gambar di
sisi kiri, URL tujuan masuk ke bagian url dari <a href="url"> .

Atribut HTML
Pada HTML, Anda dapat menentukan atribut seperti href di tag pembuka (※ lihat gambar di
sisi kiri). Selalu letakkan nilai atribut dalam tanda kutip ganda " .

4. Gambar

Tag Gambar
Tag <img> digunakan untuk menampilkan gambar.
Kita dapat menetapkan gambar dengan menentukan url di atribut src seperti berikut: <img
src="url"> . Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak ada teks yang
diapit.
5. Daftar

Daftar (1)
Anda dapat membuat daftar dengan mengapit teks dengan tag <li>.
Jangan khawatir, kita akan membahas tag <ul> di slide berikutnya.

Daftar (2)
Jenis daftar akan berubah tergantung pada tag yang Anda gunakan.
Dengan tag <ul> Anda dapat membuat daftar dengan bullet.
Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan
menjadi induk dan element yang ditutupi akan menjadi anak-nya.
Indentasi
Untuk element bersarang, praktik yang baik adalah mensejajarkan code dengan indentasi. Meskipun
tidak diperlukan, indentasi dapat memudahkan Anda untuk melihat hubungan induk-anak, terutama
pada saat code Anda sudah mulai banyak dan rumit
(※ untuk membuat indentasi, tekan tombol "tab" di awal baris).

Memulai Dengan CSS

Apa itu CSS?

CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal
seperti warna, ukuran, dan spasi pada element HTML. Gambar disisi kiri hanya terdiri dari HTML
saja. Dengan menerapkan CSS, Anda dapat menentukan style seperti tata letak, sesuai contoh yang
ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan
menentukan "dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. Pada contoh dibawah,
CSS diterapkan ke element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah
("bagaimana"). Element HTML yang ditargetkan disebut sebagai Selector.
6. Warna
Warna
Mari kita pelajari property color (warna)!
Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;. Anda tidak perlu
menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Sintax CSS
Ada beberapa hal yang harus diingat saat menulis CSS.
Seperti HTML, Anda harus selalu mengindentasi code CSS seperti gambar di bawah. Selain itu,
perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS dan titik
koma ; diakhir baris seperti gambar dibawah.
Komentar CSS
Seperti di HTML, Anda dapat menulis komentar di file CSS.
Namun di CSS, komentar harus diapit oleh /* */.

7. Ukuran Font dan Jenis Font

Ukuran Font
Ukuran font dapat ditetapkan dengan property font-size.
Satuan umum untuk menentukan font-size adalah px (piksel).

Jenis Font
Dengan property font-family, Anda dapat menentukan jenis font.
Anda dapat melakukan ini dengan menetapkanfont-family: nama font; Jika nama font berisi
spasi, Anda harus mengapitnya dengan tanda petik ganda.
Aneka Ragam Font
Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font
seperti serif dan sans-serif.
Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

8. Lebar, Tinggi, dan Warna Latar Belakang

Warna Latar Belakang
Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda
dapat menetapkan warna latar belakang seperti menetapkan property color. Selain itu, jika huruf
yang sama memanjang seperti #dddddd, ini dapat disingkat menjadi #ddd.

Lebar dan Tinggi

Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi).
Unit kedua element ini dapat ditentukan dengan px, sama seperti font-size.
9. Class

Menerapkan CSS ke element tertentu

Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan
mengubah semua element <li> menjadi merah. Jadi, bagaimana cara mengubah hanya satu
element <li> menjadi merah?

Memberi Label Pada Tag

Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan
menggunakan atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan
CSS yang berbeda ke setiap element. Saat menerapkan CSS ke class selector, perhatikan bahwa
titik . diperlukan di depan nama class.
Menerapkan CSS ke Beberapa Tag
Seperti gambar dibawah, Jika Anda menetapkan nama class yang sama kebeberapa element HTML,
CSS yang sama akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa
memberikan titik, CSS tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik,
tetapi tag tidak demikian.
 Layout (Tata Letak) Dasar

Situs Pertama Anda

Kini saatnya membuat situs pertama Anda!
Lihat gambar di bawah untuk mendapatkan ide tentang apa yang akan Anda ciptakan.

10. Struktur HTML

Di dokumen HTML, ada beberapa aturan yang harus Anda ikuti. Misalnya,
element <head> dan <body> wajib berada didalam apitan element <html> (※ Lihat gambar di sisi
kiri). Element <head> berisi informasi dokumen sementara element <body> berisi konten yang terlihat
di browser.

Menentukan Versi HTML

Disetiap dokumen HTML, Anda harus memulai dengan deklarasi DOCTYPE. Ini akan memastikan
versi HTML situs web Anda adalah yang terbaru. Kita akan menggunakan <!DOCTYPE html>,
untuk menentukan versi HTML secara otomatis. Jangan terlalu khawatir tentang versi ini, cukup
ingat bahwa ini adalah hal yang harus selalu Anda lakukan.
<head> Tag
Element <head> berisi settingan dokumen HTML yang tidak terlihat dibrowser. Ada tiga element
yang harus Anda letakkan di <head>.
Kita akan lihat masing-masing element ini dipelajaran berikutnya.

11. Struktur HTML 2

Konten dalam Tag <head>
Dalam element <head>, kita akan menentukan 1) pengcodean karakter, 2) judul situs web, dan 3)
tautan ke file CSS. Anda tidak harus menghapalnya, namun mari kita lihat arti element ini.
Karakter Encoding
Dengan menentukan pengcodean karakter di atribut charset seperti <meta charset="utf-8">,
Anda dapat mencegah situs web menjadi kacau. UTF-8 adalah karakter encoding yang
direkomendasikan untuk HTML5.

Judul untuk Situs Web Anda

Element <title> menentukan judul dokumen.
Seperti yang ditampilkan pada gambar disisi kanan, judul yang ditentukan di
element <title> hanya akan muncul di tab browser.
Menautkan file CSS
Pada latihan kita, code CSS yang Anda tulis di stylesheet.css akan langsung muncul di jendela
"Jawaban Anda". Namun umumnya tidak demikian. Anda harus membuat tautan antara HTML dan
file CSS dengan menentukan <link rel="stylesheet"> di dokumen HTML Anda. Anda dapat
menentukan nama file CSS menggunakan atribut href.

12. Layout Dasar

Layout
(tata letak) adalah salah satu bagian paling penting dalam membuat situs web. Layout situs web yang
akan Anda buat umumnya terdiri dari tiga bagian seperti yang ditampilkan pada gambar dibawah.

Tag <div>
Kita akan membuat tata letak dengan element <div> (※ "div" mewakili "divisi").
Tag <div> digunakan untuk mengelompokkan element.
Seperti contoh dibawah, layout dibagi menjadi tiga element <div> dengan nama
class header, main, dan footer.
Pelengkap Tag Otomatis
Mulai dari sini, Anda akan menulis banyak tag. Untuk mencegah kesalahan ketik, mari kita
gunakan fungsi autocomplete di editor. Seperti yang ditampilkan di bawah, Anda dapat memasukkan
nama tag dan menekan tombol "tab" untuk menyelesaikan tag (※ Tergantung pada tag, beberapa
atribut yang tidak dinginkan dapat tersisipkan, jadi lakukan ini dengan hati-hati).

Header
Setelah tata letak dasar selesai dikerjakan, sekarang mari kita mengerjakan beberapa detailnya.
Pertama, kita akan membuat header seperti gambar dibawah.
13. Struktur Header
Mari kita periksa struktur header. Ada logo "Progate" dan daftar. Mari kita kelompokkan kedua
bagian ini menggunakan element <div> seperti yang ditampilkan di bawah .

Menghapus Bullet dari Item Daftar

Dengan menerapkan property list-style di element <li>, Anda dapat menghilangkan bullet.
Karena kita tidak menginginkan bullet didaftar kita, mari kita tetapkan list-style ke none.

14. Layout Header

Menyejajarkan Header Secara Horizontal

Umumnya, element yang ditulis di HTML disejajarkan secara vertikal.
Untuk menyejajarkannya secara horizontal, kita membutuhkan CSS.
Di pelajaran ini, kita akan mempelajari cara membuat tata letak horizontal seperti yang ditampilkan
gambar disisi kanan bawah.
Property Float
Dengan menggunakan property float, Anda dapat menyejajarkan element secara horizontal. Seperti
yang ditampilkan pada contoh, menentukan float: left; akan mengatur element secara bersisian
dari kiri ke kanan.

Menyejajarkan Item Daftar Secara Bersisian

Mari kita mulai mengatur item daftar diheader secara bersisian.
Dengan menerapkan float: left; ke setiap element <li> , Anda dapat menyejajarkannya secara
horizontal dari kiri ke kanan.
Menyejajarkan Logo dan Daftar
Kemudian, mari kita letakkan logo header dan keseluruhan daftar secara bersisian. Dengan
menerapkan float: left; ke header-logo seperti yang ditampilkan dibawah, Anda dapat
menyejajarkan logo dan keseluruhan daftar secara horizontal .

15. Padding

Menyesuakian Ruang
Mari kita sesuaikan ruang antara element di header sehingga logo dan daftar di header ditempatkan
diposisi yang sesuai seperti yang ditampilkan dibawah.

Menambahkan Ruang ke Element

Jika Anda ingin menambahkan ruang ke element, Anda dapat menggunakan property padding.
Dengan menerapkan padding: 〇〇px;, ruang yang ditentukan akan ditambahkan ke semua sisi
element.
Menerapkan Padding ke Satu Sisi Saja
Anda mungkin ingin menambahkan ruang hanya ke satu sisi element. Dalam kasus ini, Anda dapat
menggunakan property seperti padding-top, padding-right, padding-bottom dan padding-
left. Misalnya, untuk menambahkan ruang dibagian atas, tetapkan padding-top: 〇〇px;.

Shorthand Padding
Anda dapat menggunakan shorthand saat menerapkan padding.
Anda dapat menerapkan padding ke beberapa sisi menggunakan satu property saja. Saat empat nilai
ditentukan, padding diterapkan searah jarum jam dari bagian atas. Saat dua nilai ditentukan, padding
diterapkan dalam urutan "atas/bawah" dan "kanan/kiri".
 Footer
Sekarang, kita akan mengerjakan tata letak footer. Sama seperti header, mari kita periksa desain dan
strukturnya. Disisi kiri footer terdapat logo, dan di sisi kanan terdapat daftar.?

16. Struktur Footer

Saat membuat header, kita menerapkan float dan padding ke setiap element <li>. Karena itu,
property CSS juga diterapkan ke element <li> di footer. Menurut Anda, bagaimana kita dapat
menerapkan property CSS ini hanya ke tag <li> di header.

Selector Bersarang
Dengan menambahkan li setelah header-list (dengan spasi di antara keduanya), Anda dapat
menerapkan CSS hanya ke element <li> di header-list. Ini memungkinkan Anda untuk
menerapkan CSS yang berbeda ke element <li> di header dan element <li> di footer.
17. Layout Footer

Mengatur Ulang Logo dan Daftar

Mari kita lihat gambar dibawah. Logo dan daftar menu footer masing -masing berada
diujung kiri dan kanan. Kita telah mempelajari cara menyejajarkan element dari kiri
menggunakan float: left , namun bagaimana jika kita mau menyejajarkannya dari
kanan?

float: right
Dengan float: right, Anda dapat menyejajarkan element secara horizontal dari kiri ke kanan.
Memosisikan Element ke Kiri dan Kanan
Dengan menggabungkan float: left; dan float: right;, Anda dapat meletakkan logo dan
daftar menu footer di baris dari kiri kekanan. Mari kita terapkan float: left; ke
selector footer-logo sehingga posisinya akan ke tepi kiri, dan menerapkan float: right; ke
selector footer-list untuk memindahkannya ke tepi kanan.

Konten

18. Layout Bagian Utama

Mari kita beralih ke layout bagian utama! Seperti yang ditampilkan dibawah, layout utama terdiri
dari tiga element, yaitu copy-container , contents, dan contact-form. Ini mungkin akan sedikit
lebih rumit daripada layout lain yang telah kita buat. Tapi jangan khawatir! Kami akan menjelaskan
setiap langkahnya.

Menerapkan CSS ke Sebagian Teks

Pada gambar di bawah, perhatikan bahwa titik (.) di element <h1> "HELLO WORLD." berwarna
merah. Kami akan menunjukkan cara menerapkannya.
Tag <span>
Anda dapat menerapkan CSS ke sebagian teks dengan mengapitnya di tag <span>. Gambar dibawah
mengilustrasikan hal ini dengan menerapkan color: red; ke selector span. Tidak ada baris baru
yang dimasukkan sebelum atau setelah element <span>.

Element block dan Inline

Di HTML, beberapa element akan dimulai dibaris baru dan beberapa tidak. Element block seperti div
akan di mulai dibaris baru, dan diperluas ke keseluruhan lebar element induknya. Sedangkan Element
inline seperti span hanya mengambil lebar secukupnya saja.
Tag <span>
Anda dapat menerapkan CSS ke sebagian teks dengan mengapitnya di tag <span>. Gambar dibawah
mengilustrasikan hal ini dengan menerapkan color: red; ke selector span. Tidak ada baris baru
yang dimasukkan sebelum atau setelah element <span>.

Element block dan Inline

Di HTML, beberapa element akan dimulai dibaris baru dan beberapa tidak. Element block seperti div
akan di mulai dibaris baru, dan diperluas ke keseluruhan lebar element induknya. Sedangkan Element
inline seperti span hanya mengambil lebar secukupnya saja.

19. Struktur Konten

Bagian berikutnya adalah konten. Pertama, mari kita buat bagian layout konten. Kita memerlukan
judul dan 4 contents-item.
20. Batas
Pada gambar di bawah, element <h3> memiliki garis batas dibawahnya. Dipelajaran ini, kita akan
belajar cara membuatnya.

Syntax untuk Batas

Anda dapat menambahkan batas dengan property border.
Seperti yang ditampilkan pada gambar, Anda dapat menentukan lebar, style, dan warna . Gunakan
property border untuk menerapkan batas ke semua sisi. Untuk menambahkan batas kesisi tertentu,
gunakan salah satu property berikut: border-bottom, border-top, border-left, atau border-
right.
21. Padding Dan Margin

Ruang di dalam dan di luar batas

Seperti ditampilkan di bawah, ada ruang yang ditambahkan diatas dan dibawah garis batas. Pada
slide berikutnya, kita akan mempelajari cara menambahkan ruang didalam dan diluar garis batas.

Padding dan Margin

Sebelumnya kita menggunakan property padding untuk memberikan ruang disekitar element.
Namun, padding hanya menambahkan ruang di dalam batas. Untuk menambahkan ruang di luar batas,
anda dapat menggunakan property margin. Anda dapat menentukan nilai margin seperti menentukan
nilai padding.
Model Kotak
Property margin, border dan padding yang telah kita bahas sejauh ini didasarkan pada
konsep model kotak. Setiap element HTML memiliki batas (secara default, sebagian besarnya tidak
terlihat). Ruang diluar batas kotak adalah margin, sedangkan ruang diantara batas dan teks adalah
padding.

Shorthand Margin
Seperti property padding, Anda dapat menentukan margin secara satu per satu disetiap sisinya, atau
sekaligus menggunakan satu property saja.

22. Layout Formulir

Formulir
DIpelajaran ini, kita akan membuat formulir pertanyaan seperti gambar dibawah ini! Ayo langsung
mulai!
23. Layout Formulir (2)

Tag <input> dan <textarea>

Selanjutnya, mari kita lihat cara membuat bidang input. Tag <input> digunakan untuk menerima
satu baris teks, sementara tag <textarea> digunakan untuk menerima beberapa baris teks.
Perhatikan bahwa tag <input> tidak membutuhkan tag penutup.

Tombol Submit (Kirim)

Kita juga dapat membuat tombol submit (kirim) dengan menambahkan atribut type ke
element <input>. Saat Anda menetapkan atribut type ke submit, element <input> menjadi tombol
submit (kirim) seperti gambar di bawah. Secara default, teks yang ditampilkan ditombol adalah
"Submit".
Atribut Nilai
Jika diinginkan, Anda dapat mengubah teks yang ditampilkan di tombol submit (kirim) dengan
menentukan atribut value. Dengan atribut ini, kita dapat mengubah nama tombol submit menjadi
apapun, seperti Kirim.

Menerapkan CSS ke Beberapa Selector

Anda dapat mengelompokkan CSS yang sama dengan memisahkan beberapa selector dengan
koma , seperti yang ditunjukkan pada gambar tengah. Dengan melakukan hal tersebut, Anda dapat
menerapkan CSS yang sama ke berbagai selector. Untuk situs web kita, mari terapkan CSS yang
sama ke element <input> dan <textarea> menggunakan metode ini.