Cara Membuat CSS Sederhana dengan Notepad

Artikel ini akan memandu Anda untuk menyimpan informasi dalam bentuk halaman HTML dan CSS menggunakan Notepad. HTML adalah bahasa pemrograman untuk membuat situs web, sementara CSS adalah bahasa untuk menentukan gaya pada elemen HTML (seperti warna, jenis huruf, dan lain-lain).

Metode 1

Metode 1 dari 2:

Membuat Halaman HTML

Unduh PDF

Klik menu
Start, masukkan notepad, dan klik aplikasi biru Notepad di bagian atas jendela Start.
Masukkan <!DOCTYPE html> ke jendela Notepad, lalu tekan ↵ Enter untuk memulai baris baru.
Masukkan <html> dan tekan ↵ Enter.
Masukkan <body> dan tekan ↵ Enter. Kini, Anda dapat mulai memasukkan informasi untuk situs.
5
Sisipkan tanda kepala. Masukkan <h1>TEKS</h1>, dan gantikan "TEKS" dengan teks yang Anda inginkan. Setelah itu, tekan ↵ Enter.
- Misalnya, jika Anda ingin membuat kepala halaman dengan teks "Selamat Datang", masukkan <h1>Selamat Datang!</h1> ke jendela Notepad.
6
Tambahkan teks di bawah kepala. Masukkan <p1>TEKS</p1>, dan gantikan "TEKS" dengan teks yang Anda inginkan. Setelah itu, tekan ↵ Enter.
- Misalnya, jika Anda ingin membuat kepala halaman dengan teks "Digeboy, geboy mujair~", masukkan <p1>Digeboy, geboy mujair~</p1> ke jendela Notepad.
7
Tambahkan kepala dan paragraf lain. Setiap kepala dan paragraf baru harus memiliki angka yang lebih besar dari kepala sebelumnya. Misalnya, gunakan tanda <h2></h2> untuk membuat kepala kedua, dan <p2></p2> untuk membuat paragraf.
- Pastikan Anda menekan ↵ Enter di setiap akhir baris.
Setelah memasukkan baris terakhir kode, masukkan </body> di baris baru, tekan ↵ Enter, dan masukkan </html>. Kini, dokumen Anda siap dihias dengan CSS.
Iklan

Metode 2

Metode 2 dari 2:

Menambahkan CSS

Unduh PDF

1
Pahami cara kerja CSS. CSS digunakan untuk mengganti penampilan elemen HTML, seperti paragraf. CSS umumnya ditulis dalam format berikut:^{[1]XTeliti sumber}
- tanda elemen { (misalnya, p {)
- kode pengubah: properti; (misalnya, font-size: 20px;)

2
Tekan spasi di antara tanda <html> dan <body>. Tanda ini umumnya berada di bagian atas halaman.
Tambahkan tanda HEAD. Masukkan <head> dan tekan ↵ Enter.
Tambahkan tanda STYLE. Masukkan <style> dan tekan ↵ Enter.
Ubah latar belakang halaman web dengan cara berikut ini:
Masukkan body { dan tekan ↵ Enter.
Masukkan background-color: lightblue; dan tekan ↵ Enter.Anda dapat memasukkan warna apa saja yang didukung, juga kode "light" atau "dark" untuk mengubah kecerahan.
Masukkan } dan tekan ↵ Enter.
Buatlah gaya untuk kepala pertama. Masukkan h1 { dan tekan ↵ Enter. Sisipkan kode pengubah yang Anda inginkan, diikuti dengan ↵ Enter. Setelah itu, masukkan }, dan tekan ↵ Enter. Anda dapat menggunakan kode yang berbeda pada suatu elemen, selama elemen tersebut berada dalam baris yang berbeda. Berikut adalah elemen yang umumnya dapat diatur dengan kode pengubah:
Ukuran teks - Masukkan font-size: 30px; untuk mengatur ukuran teks sebesar 30 poin. Gantikan "30" dengan angka yang Anda inginkan.
Warna teks - Masukkan color: black; untuk mengatur warna teks menjadi hitam. Gantikan "black" dengan warna yang Anda ingin.
Perataan teks - Masukkan text-align: center; untuk membuat teks rata tengah. Anda juga dapat memasukkan kode left atau right untuk membuat teks rata kiri atau kanan.
Jenis huruf - Masukkan font-family: times new roman; untuk mengatur huruf menjadi Times New Roman. Anda juga dapat menggunakan jenis huruf verdana atau georgia.
Buatlah gaya untuk paragraf pertama. Masukkan p1 { dan tekan ↵ Enter. Sisipkan kode pengubah yang Anda inginkan, diikuti dengan ↵ Enter.
Kode yang Anda gunakan di sini sama dengan kode untuk membuat gaya paragraf.
Buatlah gaya untuk bagian dokumen lain. Anda dapat memberi gaya pada elemen apa saja dengan menyebutkan teks tanda. Setelah itu, tuliskan kurung kurawal ({), tambahkan kode pengubah, dan masukkan kurung kurawal tutup. (}).
Tutup tanda STYLE dan HEAD. Di bawah baris gaya terakhir, masukkan </style> dan tekan ↵ Enter. Setelah itu, masukkan </head> dan tekan ↵ Enter. Gaya CSS Anda kini telah selesai. Anda dapat memperhatikan teks tersebut dan menyimpannya.


Menyimpan Dokumen
Unduh PDF

Perhatikan dokumen CSS. Meskipun dokumen CSS Anda akan sedikit berbeda, umumnya dokumen tersebut akan berbentuk seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
font-size: 45px;
}
p1 {
color: black;
}
</style>
</head>
<body>
<h1>Halo!</h1>
<p1>Digeboy~ geboy mujair~</p1>
</body>
</html>
Klik File di pojok kiri atas jendela Notepad. Anda akan melihat menu drop-down.
Klik opsi Save As… di dekat bagian bawah menu. Anda akan melihat jendela penyimpanan.
Pilih folder penyimpanan berkas dengan mengeklik nama folder (misalnya "Desktop") di bagian kiri jendela.
Pilih opsi "Save as type". Anda akan melihat menu drop-down.
Klik opsi All Files pada menu.
Beri nama berkas dengan ekstensi HTML. Pada kolom "File name", masukkan nama berkas Anda (misalnya "geboy mujair"), dan akhiri dengan .html.
Misalnya, jika Anda memberi nama berkas "geboy mujair", masukkan my css.html pada kolom nama berkas.
Jika memiliki program yang dapat menjalankan berkas CSS, Anda dapat memberi ekstensi berkas .css, alih-alih .html.
Klik Save di pojok kanan bawah jendela "Save As". Berkas Anda akan tersimpan dalam bentuk CSS yang dapat dieksekusi. Artinya, Anda dapat membuka berkas dalam peramban atau penyunting HTML (alih-alih Notepad).


Tips
Unduh PDF

Saat membuat kode HTML atau CSS, Anda tidak perlu memedulikan spasi di antara kode. Anda dapat menekan ↵ Enter berkali-kali tanpa mengubah fungsi program.
Cobalah menambahkan indentasi pada kode CSS Anda untuk memudahkan Anda menemukan elemen. Misalnya, Anda dapat membuat indentasi tunggal untuk kode kepala, atau indentasi ganda untuk kode paragraf.