# Paduan Dasar Untuk HTML dan CSS
Document writer: Hastho Rahtomo
Markdown by: Muhammad Fauzan Arrafi
17 October 2023
Chapter 1: Pengenalan
Pernah kah kamu membuka website pada gadget mu? Kamu pasti pernah mengakses website hiburan seperti Spotify dan Youtube, jejaring sosial seperti Twitter dan Instagram maupun website untuk belajar seperti Ruang Guru dan Brainly. Mereka dibuat menggunakan bahasa pemograman HTML, namun apa itu HTML?
HTML
HTML singkatan dari HyperText Markup Language, yang dalam bahasa Indonesia dapat diartikan sebagai “Bahasa Markup Hiperteks.” HTML adalah bahasa pemrograman yang digunakan untuk membuat halaman web dan struktur dasar dari konten di dalamnya. Ini adalah komponen kunci dari web, karena digunakan untuk mengatur teks, gambar, tautan, media, dan elemen-elemen lainnya dalam sebuah halaman web.
HTML bekerja dengan cara menandai atau “markup” berbagai elemen pada halaman web dengan menggunakan tag-tag khusus yang ditempatkan di dalam dokumen HTML. Tag-tag ini memberi petunjuk kepada browser web tentang cara menampilkan konten pada halaman.
Namun, HTML Tidak dapat bekerja sendiri. HTML membutuhkan bantuan dari bahasa lain seperti CSS (Cascading Style Sheet) dan JS (JavaScript) yang memiliki berbagai fungsi untuk membantu HTML, CSS berfungsi untuk “menghias” website yang tersedia dan JS untuk mengatur logic dari website yang telah dibuat. Kali ini kita akan belajar bagaimana cara menggunakan HTML dan CSS untuk membuat sebuah website statis.
CSS
CSS adalah singkatan dari Cascading Style Sheets, yang dalam bahasa Indonesia dapat diterjemahkan sebagai “Lembar Gaya Berkaskelana.” CSS adalah bahasa pemrograman yang digunakan untuk mengontrol tampilan dan format dari elemen-elemen yang ditandai dalam sebuah dokumen HTML, seperti teks, gambar, tautan, dan elemen-elemen lainnya dalam halaman web.
Kita akan menggunakan Text Editor untuk membantu kita dalam menggunakan bahasa pemograman HTML dan CSS. Terdapat banyak text editor yang dapat kamu gunakan, seperti Atom, Notepad++ dan Visual Studio Code tetapi untuk kali ini kita akan menggunakan Visual Studio Code. Kamu dapat mengakses website Visual Studio Code lewat link berikut, <https://code.visualstudio.com/>
Visual Studio Code
Visual Studio Code (biasanya disingkat sebagai VS Code) adalah sebuah text editor kode sumber terbuka (open-source) yang dikembangkan oleh Microsoft. VS Code dirancang khusus untuk pengembangan perangkat lunak.
Setelah kamu mendownload Visual Studio Code, ayo kita mulai.
Chapter 2: Base
Hal pertama yang harus kamu lakukan untuk membuat website adalah membuat file untuk website mu terlebih dahulu serta menyiapkan file file yang diperlukan.
Membuat Folder dan File
Step 1: Buka aplikasi visual studio mu lalu klik “file” pada bagian kiri atas.
Step 2: Klik “open folder”
Step 3: Pilih letak dimana folder mu ingin dibuat, lalu buat folder baru dengan meng-klik kanan pada mouse lalu memilih new -> folder kemudian beri nama folder mu.
Step 4: klik kiri satu kali pada Folder yang sudah dibuat kemudian klik “select folder”. Visual studio akan membuka folder yang telah kamu pilih, isinya masih kosong namun jangan khawatir. Selanjutnya kita akan mengisi folder tersebut.
Step 5: Klik kanan pada bagian titik merah kemudian pilih “new file”
Step 6: Beri nama folder mu “index.html” seperti berikut, ulangi step 5 namun berikan nama folder nya “style.css”.
Step 7: hasil akhirnya akan seperti ini, selamat kamu sudah membuat file HTML dan CSS.
Membuat dasar pada HTML
Langkah selanjutnya setelah kamu membuat folder dan file projek mu adalah mengisi file projek mu dengan kode-kode. Namun kamu harus mempersiapkan file tersebut agar kode yang kamu masukan dapat dikenal oleh file mu. Kamu dapat mencoba hal berikut.
Buka file index.html -> ketik “doc” tanpa petik dua (”) kemudian enter. Hasilnya akan seperti berikut.
File html mu sudah siap dimasukan kode kode, kamu dapat mencobanya dengan menulis “hello world” pada bagian dalam <body> kemudian save seperti berikut.
Selanjutnya kamu dapat membuka file yang telah kamu buat menggunakan browser. Ini adalah hasil nya.
Selamat, ini adalah website pertama mu. Pada chapter selanjutnya kita akan mulai mengisi file HTML yang telah kamu buat.
Chapter 3: Isi Base HTML
Kamu telah membuat folder untuk menampung projek mu, kamu juga telah mengisinya dengan index.html dan style.css. Selanjutnya kita akan mulai mengisi file index.html mu dengan kode kode berikut.
Head <head> dan Body <body>
Coba bayangkan seorang manusia normal, ia memiliki kepala dan badan. Begitu pula dengan kode HTML. Head <head> berfungsi untuk mengatur body, head tidak akan ditampilkan pada output website. Sebaliknya, body <body> merupakan tempat dari elemen elemen yang akan ditampilkan pada output. Tanda dari akhir bagian heda dan body dapat dilihat dengan adanya kode </head> dan </body> seperti berikut.
Bagian berwarna ungu adalah daerah dari <head> dan bagian berwarnkuning adalah daerah <body>, akhir dari setiap daerah dapat dikenali dengan penggunaan tanda tutup </kode yang sama dengan pembuka>. Maka dapat disimpulkan rumus dari kode yang digunakan adalah seperti berikut.
Kamu dapat memperhatikan contoh berikut.
kode <kode> memiliki isi yaitu “aku ganteng” karena “aku ganteng” berada dalam daerah <kode> otomatis “aku ganteng” akan menjadi value dari <kode>
Header <h>
Tag HTML <h> yang Anda sebutkan tidak merupakan tag standar dalam HTML. Biasanya, tag untuk judul (heading) dalam HTML adalah , , , , , atau , di mana angka yang mengikuti “h” menunjukkan tingkat kepentingan atau ukuran teks yang berbeda. Kamu dapat mencobanya dengan memasukan kode berikut kedalam <body>.
<body>
<h1>Ini adalah h1</h1>
<h2> Ini adalah h2</h2>
<h3> Ini adalah h3 </h3>
<h4> Ini adalah h4</h4>
<h5> Ini adalah h5 </h5>
<h6> Ini adalah h6 </h6>
</body>
Hasilnya akan menjadi seperti berikut.
*Paragraf *
Adalah isi dari Header, paragraf dipakai untuk memuat banyak text sekaligus karena ukurannya lebih kecil dari header. Kamu dapat mencoba kode berikut.
<body>
<h1>Ini adalah h1</h1>
ini adalah paragraf. ini adalah paragraf.ini adalah paragraf.
</body>
Hasilnya akan menjadi seperti berikut.
Break <br>
Break dipakai untuk membuat baris baru atau jeda yang dapat dipakai didalam sebuah elemen maupun sebagai pembatas antar elemen. Break tidak memiliki kode penutup. Untuk penjelasan lebih jelas, perhatikan kode berikut.
<body>
<h1>Ini adalah h1</h1>
ini adalah paragraf. ini adalah paragraf. ini adalah
paragraf.
</body>
Hasilnya akan menjadi seperti berikut.
Bold <b>, Underline \ dan Italic <i>
Ketiga kode tersebut memiliki kesamaan, yaitu memberikan efek pada text. Bold menjadikan text tersebut tebal, underline memberikan garis bawah dan italic memberikan efek miring pada text. Perhatikan kode berikut.
<body>
<h1>Ini adalah h1</h1>
<b>ini adalah bold.</b>
<u>ini adalah underline.</u>
<i>ini adalah italic.</i>
</body>
Hasilnya akan menjadi seperti berikut.
List
Terdapat 2 tipe list yang dapat kamu gunakan, yaitu:
**ordered list **, adalah sebuah list dimana data yang kamu masukan akan terurut menggunakan angka/huruf.
<ol>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ol>
Hasilnya akan menjadi seperti berikut.
**Unordered list **, adalah sebuah list yang tidak mengurutkan data yang dimasukan dan hanya menggunakan dot/bullet sebagai indikator.
<ul>
<li>Item A\</li>
<li>Item B\</li>
<li>Item C\</li>
</ul>
Hasilnya akan menjadi seperti berikut.
*Div *
Berfungsi sebagai wadah untuk menyatukan elemen elemen yang ada didalamnya menjadi satu kelompok, perlu diingat bahwa div tidak memiliki pengaruh visual maupun efek secara langsung, div sendiri tidak memiliki warna dan menyesuaikan ukurannya dengan elemen yang ada didalamnya.
<div>
<h1>Judul Halaman </h1>
Ini adalah paragraf pertama.
Ini adalah paragraf kedua.
</div>
Image <img\ />
Memiliki fungsi untuk memasukan gambar pada html. Image memiliki format kode sebagai berikut.
Atau kamu dapat mencontoh kode berikut ini
<img src="https://upload.wikimedia.org/wikipedia/en/e/e7/Steve\_%28Minecraft%29.png" alt="steve" />
Hasilnya akan menjadi seperti berikut.
Button <button>
Digunakan untuk membuat tombol dalam halaman web. Tombol ini biasanya berfungsi untuk memicu tindakan atau peristiwa tertentu saat diklik oleh pengguna. Tombol ini dapat digunakan untuk mengirim formulir, memulai skrip JavaScript, atau menjalankan berbagai tindakan sesuai dengan kebutuhan anda, Perhatikan kode berikut dan perhatikan outputnya.
<body>
<button>Klik Saya</button>
</body>
*Anchor *
Digunakan untuk membuat tautan ke halaman web lain, berkas, atau alamat URL lainnya. Ini memungkinkan pengguna untuk mengeklik tautan dan beralih ke lokasi yang dituju. Elemen \ sering digunakan untuk membuat tautan teks atau gambar. Untuk mencobanya, ikuti langkah langkah berikut:
Step 1: buat file “contohAnchor.html” pada folder projek mu
Step 2: masukan kode \ Ini adalah tautan ke contohAnchor </a> pada index.html
Step 3: perhatikan output nya.
Kamu akan mengakses file contohAnchor.html apabila mengklik link tersebut. Anchor sangat membantu apabila website mu terdiri dari berbagai file HTML yang harus dihubungkan.
Chapter 4: Styling
Ini adalah chapter terakhir untuk membuat website statis, pada chapter ini kamu akan belajar mengenai CSS untuk menghias file HTML mu. Terdapat banyak kode yang menghasilkan beragam efek yang dapat kamu gunakan. Mari kita mulai!
Menghubungkan HTML dengan CSS
Langkah pertama yang harus kita lakukan untuk dapat menggunakan HTML dengan CSS adalah dengan menghubungkan keduanya menggunakan kode berikut. Terdapat dua cara untuk menggunakan CSS untuk file HTML mu, inline dan eksternal CSS.
Eksternal CSS
Eksternal CSS menggunakan file terpisah untuk men-style file HTML mu.
Kamu dapat memperhatikan kode dibawah ini.
<link rel="stylesheet" type="text" href="style.css">
Kamu dapat mengcopy kode tersebut dan menaruhnya didalam <head>, seperti berikut:
Sekarang, kamu telah menghubungkan file HTML mu dengan CSS.
Internal CSS
Berbeda dengan styling secara eksternal, internla css mengarah kepada tag <style> yang bisa kalian tulis di didalam <head> tag, berikut adalah contohd dari penggunaan internal css
<head>
<title>Tutorial web satis part 1</title>
<style>
.gambar {
border-radius: 10px;
}
</style>
</head>
Inline CSS
Berbeda dari eksternal CSS, inline css tidak membutuhkan file eksternal untuk digunakan. Kita dapat menggunakan “style” seperti contoh berikut.
Font Family
Font-family adalah kode CSS pertama yang akan kamu pelajari, font-family digunakan untuk mengubah gaya font/model font untuk web HTML mu. Terdapat banyak tipe font yang dapat kamu pakai, seperti “arial”, “sans-serif”, “serif”, “helvetica”, dll. Kamu juga dapat menggunakan font dari internet. Perhatikan kode berikut.
<body>
<h2>Komandro</h2>
<h2 style="font-family: Helvetica;">Komandro</h2>
</body>
Hasilnya adalah seperti berikut.
Dapat kamu lihat perbedaan dari tipe font pertama dan kedua, teks pertama adalah teks yang tidak menggunakan “font-family” dan yang kedua menggunakannya, font yang dipilih adalah “Helvetica”.
Font Size
Digunakan untuk mengatur ukuran dari text, kamu dapat mencoba kode berikut.
<body>
<h2>Komandro</h2>
<h2 style="font-size: 40px;">Komandro</h2>
</body>
Hasilnya adalah seperti berikut.
Font Weight
Digunakan untuk mengatur Ketebalan dari text, kamu dapat memilih ketebalan text dari light hingga bold, kamu juga dapat memasukan satuan ukuran.
<body>
<h2>Komandro</h2>
<h2 style="font-weight: 400;">Komandro</h2>
</body>
Hasilnya adalah seperti berikut.
Text-align
Digunakan untuk mengatur posisi dari text, kamu dapat mencoba kode berikut.
<h2>Komandro</h2>
<h2 style="text-align: center;">Komandro</h2>
<h2 style="text-align: right;">Komandro</h2>
Hasilnya akan seperti berikut.
Color
Digunakan untuk mengubah warna dari font mu.
<body>
<h2>Komandro</h2>
<h2 style="color: green;">Komandro</h2>
</body>
Hasilnya akan seperti berikut.
Background-color
Digunakan untuk mengubah warna latar belakang dari elemen.
<body>
<h2 style="background-color: green;">Komandro</h2>
</body>
Hasilnya akan seperti berikut.
Background-image
Digunakan untuk menjadikan gambar yang kita inginkan menjadi background untuk elemen yang kita inginkan. Perhatikan kode berikut dan lihat hasilnya.
<h2 style="background-image:
url(https://cdn.oneesports.gg/cdn-data/2022/01/GenshinImpact_Zhongli_drinking_tea.jpg);">
komandro
komandro
komandro
komandro
</h2>
Border
Digunakan untuk membuat batas border pada ujung element, banyak tipe border yang dapat kamu gunakan, berikut adalah beberapa contoh border yang dapat kamu gunakan dan cara menggunakannya.
border
Komandro
dash
Komandro
dotted
Komandro
double
\ Komandro\</h2\>
Margin dan Padding
Margin adalah kode untuk mengatur jarak antara elemen dengan elemen lain diluarnya, sedangkan padding adalah kode untuk mengatur jarak antara pembungkus dan elemennya.
Terdapat 4 arah untuk menentukan ukuran margin dan padding.
-
Top: mengatur jarak pada arah atas.
-
left: mengatur jarak pada arah kiri.
-
bottom: mengatur jarak pada arah bawah.
-
right: mengatur jarak pada arah kanan.
Kamu dapat menggunakannya adalah seperti contoh berikut.
-
Margin-top
-
Margin-bottom
-
Margin-left
-
Padding-top
-
Padding-right
-
Padding-bottom
Untuk penjelasan yang lebih jelas perhatikan kode berikut.
<body>
<h2 style="border: 3px solid black; padding: 20px;"> Komandro</h2>
<h2 style="border: 3px solid black; margin: 20px;"> Komandro</h2\>
</body>
Hasilnya akan seperti berikut.
Width dan Height
Adalah kode yang dipakai untuk mengatur lebar dan tinggi dari sebuah elemen.
Width, adalah kode untuk mengatur kelebaran yang bersifat statis (tidak akan berubah valuenya).
<img src="" alt="" width="100px" />
Height, adalah kode untuk mengatur Ketinggian yang bersifat statis (tidak akan berubah valuenya). “
“
Min dan Max
Kamu juga dapat mengatur ukuran minimal dan maksimal dari suatu elemen, kamu dapat memilih kode kode berikut.
Min-Width, digunakan untuk mengatur Min-width: ukuran bebas; batas kelebaran minimal untuk suatu elemen.
Max-Width, digunakan untuk mengatur Max-width: ukuran bebas; batas kelebaran maksimal untuk suatu elemen.
Min-height, digunakan untuk Min-height: ukuran bebas; mengatur batas ketinggian minimal untuk suatu elemen.
Max-height, digunakan untuk Max-height: ukuran bebas; mengatur batas ketinggian maksmal untuk suatu elemen.
Class dan ID
Kamu dapat menggunakan class dan id untuk memanggil/selector variabel yang terkandung didalamnya. Untuk ini kita membutuhkan style.CSS dan index.HTML (pastikan file HTML dan CSS mu sudah terhubung). Perhatikan kode berikut.
Index.HTML
<body>
<h2 class="iniClass">Class Komandro</h2>
<h2 id="iniId">ID Komandro</h2>
</body>
Style.CSS
.iniClass {
color: red;
}
#iniId {
color: blue;
}
Hasilnya akan seperti berikut.
Secara fungsi, class dan Id memiliki fungsi yang sama. Kamu dapat memilih salah satu nya untuk dipakai pada website projek mu.
Hover
Mengacu pada keadaan ketika pengguna mengarahkan kursor mouse mereka ke elemen HTML tertentu, seperti tautan (link) atau elemen yang dapat diinteraksi. Saat pengguna mengarahkan kursor ke elemen tersebut, terkadang tindakan atau perubahan visual khusus dapat terjadi, dan ini disebut “hover effect”. Perhatikan kode berikut.
Index.HTML
<body>
<h2> Class Komandro</h2>
</body>
Style.CSS
h2{
color: green;
}
h2:hover{
color:yellow;
}
Hasilnya akan seperti berikut.
Menentukan Posisi Item
Kita dapat mengatur posisi elemen dengan menghitung ukuran elemen dan ukuran layar kita. Berikut adalah poin poin penting dalam menentukan posisi item:
- Apabila kita menggunakan satuan persen sebagai ukuran (%), pastikan total keseluruhannya adalah 100%.
- Apabila kita menggunakan satuan pixel (px), pastikan total keseluruhannya sesuai dengan lebah layar mu.
Untuk penjelasan lebih detail, perhatikan kode berikut.
<img src="https://www.ligagame.tv/templates/yootheme/cache/genshin-impact-zhongli_10461-ccede73b.webp"
width="30%" style="margin-left: 35%; margin-right: 35%;" />
Hasilnya akan seperti berikut:
Mengapa gambarnya menjadi ditengah? Karena margin kiri bernilai 35%, gambar berukuran 30% dan margin kanan bernilai 35% seperti gambar dibawah ini.
Margin kanan dan kiri dapat mengubah posisi gambar menjadi ditengah.
Ayo mencoba
Ubah posisi agar gambar berada di arah kanan lalu ubah gambar ke arah kiri. Sebagai clue, kamu dapat melihat pada bagian “margin” dan “width” pada kodingan mu!
Untuk implementasi dari materi ini, kalian bisa cek di bagian Mini project!