Cara Membuat Website Sederhana HTML dan CSS

Halo Sobat Sederhana, apakah kamu ingin membuat website sederhana yang bisa dipakai untuk memperkenalkan bisnismu, portofolio atau bahkan hobi kamu? Jangan khawatir, dalam artikel ini aku akan membahas cara membuat website sederhana menggunakan HTML dan CSS.

Pengenalan HTML dan CSS

Sebelum kita mulai membuat website, mari kita kenali dulu HTML dan CSS. HTML atau Hyper Text Markup Language adalah bahasa pemrograman yang digunakan untuk membuat struktur konten pada website seperti gambar, teks, video dan lain sebagainya. Sementara CSS atau Cascading Style Sheets digunakan untuk mengatur tampilan atau desain dari konten tersebut seperti warna, ukuran dan layout.

HTML dan CSS biasanya digunakan bersama-sama untuk membuat website yang menarik dan mudah dipahami oleh pengunjung.

Persiapan sebelum Membuat Website

Sebelum kita mulai membuat website, ada beberapa persiapan yang harus dilakukan. Pertama-tama, kamu harus memiliki aplikasi text editor seperti Sublime Text, Atom atau Notepad ++. Selain itu, pastikan kamu juga sudah memiliki browser seperti Google Chrome atau Mozilla Firefox untuk melihat hasil website yang sudah dibuat.

Selain itu, sebaiknya kamu juga membuat sketsa atau wireframe dari tampilan website yang ingin kamu buat. Hal ini akan membantumu memahami komponen-komponen yang dibutuhkan dan menghindari kesalahan penempatan.

Memulai Membuat Website

Nah, sekarang kita sudah siap untuk mulai membuat website! Pertama-tama, buka aplikasi text editor yang kamu miliki dan buatlah file HTML baru dengan nama index.html.

Setelah itu, ketikkan kode HTML berikut ini:

Kode HTML	Hasil Output
Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini.	Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini.

Setelah itu, kamu bisa menyimpan file tersebut dan membukanya di browser untuk melihat hasilnya. Kamu akan melihat sebuah halaman web kosong dengan judul “Judul Website” dan tulisan “Selamat Datang di Website Sederhana”.

Menambahkan Heading, Paragraf dan Link

Setelah berhasil membuat halaman web, sekarang kita akan menambahkan beberapa komponen website seperti heading, paragraf dan link. Berikut adalah contoh kode HTML yang bisa kamu gunakan:

Kode HTML	Hasil Output
Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini. Komponen Website Link ke Google Daftar item kedua	Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini. Komponen Website Link ke Google Daftar item kedua

Dalam kode HTML di atas, kita telah menambahkan heading kedua dengan judul “Komponen Website” dan sebuah link yang mengarah ke Google. Link tersebut dibungkus oleh tag <a> yang berfungsi untuk memetakan alamat URL. Kita juga menambahkan daftar item dengan menggunakan tag <ul> dan <li>.

Menambahkan Gambar

Selain teks dan link, kita juga bisa menambahkan gambar pada website kita. Caranya cukup mudah, kamu hanya perlu menambahkan tag <img> dan memasukkan alamat URL gambar tersebut. Berikut adalah contoh kode HTML yang bisa kamu gunakan:

Kode HTML	Hasil Output
Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini.	Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini.

Dalam kode HTML di atas, kita menambahkan sebuah gambar dengan ukuran 600 x 400 piksel yang dihasilkan secara acak menggunakan website dummyimage.com. Alamat URL gambar tersebut dimasukkan ke dalam atribut “src” pada tag <img>.

Mengatur Tampilan dengan CSS

Selanjutnya, kita akan membahas cara mengatur tampilan atau desain dari website menggunakan CSS. Pertama-tama, buatlah file baru dengan nama style.css dan simpan di dalam folder yang sama dengan file index.html.

Setelah itu, ketikkan kode CSS berikut ini:

Kode CSS	Hasil Output
body { background-color: #f2f2f2; } h1 { color: #333333; text-align: center; } p { font-size: 18px; } img { display: block; margin: 0 auto; }	–

Dalam kode CSS di atas, kita telah menambahkan beberapa aturan gaya untuk mengatur tampilan dari website. Misalnya, kita mengatur warna background menjadi #f2f2f2, warna teks pada heading menjadi #333333, dan ukuran font pada paragraf menjadi 18 piksel.

Selain itu, kita juga menambahkan aturan gaya untuk mengatur tampilan gambar agar berada di tengah halaman dengan jarak margin sekitar 0 piksel.

Menghubungkan File CSS dengan HTML

Setelah berhasil membuat file CSS, kita perlu menghubungkannya dengan file HTML agar dapat diaplikasikan pada halaman web. Caranya cukup mudah, kamu hanya perlu menambahkan tag <link> pada bagian <head> pada file HTML.

Berikut adalah contoh kode HTML yang bisa kamu gunakan:

Kode HTML	Hasil Output
Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini.	–

Dalam kode HTML di atas, kita menambahkan tag <link> pada bagian <head> yang menghubungkan file CSS dengan file HTML. Atribut “href” pada tag <link> menunjukkan alamat file CSS yang akan dihubungkan.

Menambahkan Halaman Lain

Sebuah website bisa terdiri dari banyak halaman yang berbeda-beda. Untuk menambahkan halaman lain pada website kita, caranya cukup mudah. Kamu hanya perlu membuat file HTML baru dan membuat link pada file HTML sebelumnya yang mengarah ke halaman tersebut.

Berikut adalah contoh kode HTML yang bisa kamu gunakan untuk membuat halaman baru dengan nama “about.html”:

Kode HTML	Hasil Output
Tentang Kami Halaman Tentang Kami Ini adalah halaman tentang kami.	–

Dalam kode HTML di atas, kita membuat sebuah halaman baru dengan judul “Tentang Kami” dengan file HTML yang bernama “about.html”. Selain itu, kita juga menghubungkan file CSS yang sama dengan file HTML sebelumnya.

Setelah itu, kita bisa membuat link pada file HTML sebelumnya yang mengarah ke halaman baru ini. Berikut adalah contoh kode HTML yang bisa kamu gunakan:

Kode HTML	Hasil Output
Judul Website Selamat Datang di Website Sederhana Ini adalah paragraf pertama pada website ini. Tentang Kami	–

Dalam kode HTML di atas, kita menambahkan sebuah link baru dengan judul “Tentang Kami” yang mengarah ke halaman baru dengan nama file “about.html”.

FAQ

1. Apa itu HTML dan CSS?

HTML atau Hyper Text Markup Language adalah bahasa pemrograman yang digunakan untuk membuat struktur konten pada website seperti gambar, teks, video dan lain sebagainya. Sementara CSS atau Cascading Style Sheets digunakan untuk mengatur tampilan atau desain dari konten tersebut seperti warna, ukuran dan layout.

2. Apa saja yang dibutuhkan untuk membuat website?

Kamu membutuhkan aplikasi text editor seperti Sublime Text, Atom atau Notepad ++ untuk membuat file HTML dan CSS. Selain itu, pastikan kamu juga memiliki browser seperti Google Chrome atau Mozilla Firefox untuk melihat hasil website yang sudah dibuat.

3. Bagaimana cara menambahkan gambar pada website?

Kamu perlu menambahkan tag <img> pada file HTML dan memasukkan alamat URL gambar tersebut di dalam atribut “src”.

4. Apa yang harus dilakukan jika ingin mengubah tampilan dari website?

Kamu bisa mengubah tampilan dari website menggunakan CSS. Kamu perlu membuat file CSS baru dan menghubungkannya dengan file HTML menggunakan tag <link>. Setelah itu, kamu bisa menambahkan aturan gaya pada file CSS untuk mengatur desain dan tampilan dari website.

5. Bagaimana cara menambahkan halaman baru pada website?

Kamu perlu membuat file HTML baru untuk halaman tersebut dan membuat link pada file HTML sebelumnya yang mengarah ke