Membuat Website Menggunakan HTML Dan CSS - Gamelab.ID

Trang chủ » Html Dan Css Sederhana » Membuat Website Menggunakan HTML Dan CSS - Gamelab.ID

Có thể bạn quan tâm

Logo Gamelab Logo Gamelab
  • Masuk Daftar

Hasil pencarian :

Hasil tidak ditemukan. Silahkan gunakan keyword yang lain

    Hasil pencarian :

    Hasil tidak ditemukan. Silakan gunakan keyword yang lain.

  • Masuk Daftar

BERITA PROGRAMMING Membuat Website Menggunakan HTML dan CSS

Membuat Website Menggunakan HTML dan CSS

Oleh Lintang Cahya Maharani | Minggu, 25 April 2021

Laporkan Plagiasi Membuat Website Menggunakan HTML dan CSS

Website adalah salah satu media masa yang cukup digemari di masa sekarang, terlebih lagi website dengan jenis blog dan juga website jualan. Lalu, bagaimana sih cara untuk membuat website itu?

Ciptakan lingkungan belajar yang lebih MENYENANGKAN dengan GAME-BASED LEARNING!

HUBUNGI KAMI

Aktivitas di kantor membosankan?Karyawan engangement kurang?GAMIFIKASI-IN aja!

HUBUNGI KAMI

Daftar Isi Artikel

Apa itu website?

Website, adalah situs dalam internet yang dapat diakses secara luas dan berisi beberapa halaman yang menghubungkan seseorang dalam wilayah atau daerah yang berbeda. Website, juga sering kali dijadikan tempat untuk mempromosikan barang atau jasa yang tidak perlu langsung mendatangkan orang kesuatu wilayah atau daerah tersebut. Selain itu, website juga memiliki beberapa jenis yang memiliki fungsi yang berbeda-beda.

  1. Website pribadi atau Blog,
  2. Website toko online,
  3. Website perusahaan, dll.

Jenis-jenis website sangatlah beragam, tergantung fungsi dari website yang kita buat itu digunakan untuk apa. Namun, banyaknya jenis website yang ada yang sering kita temui adalah tiga jenis yang sudah disebutkan di atas. Membuat website ternyata ada beberapa cara yaitu dengan menggunakan coding dan juga ada yang menggunakan cara instant tanpa menggunakan coding. Nah, di masa sekarang ini cara yang sering dilakukan adalah membuat website dengan cara instant yang tanpa menggunakan coding, tetapi yang akan kita pelajari sekarang adalah cara membuat website menggunakan HTML dan CSS. Bagaimana ya caranya? Yuk kita simak sama-sama.

Baca Juga : Sering Dengar Kata Cache? Ini Definisi dan Manfaatnya

Membuat Website Menggunakan HTML dan CSS

Membuat wireframe / kerangka website

Langkah yang pertama ini adalah membuat wireframe. Apa gunanya? Membuat wireframe sebelum membuat website dapat memudahkan kita dalam pemubuatan website agar tidak bingung akan dibuat desain seperti apa website kita nantinya. Membuat wireframe tidak perlu bagus, asalkan dapat mencakup semua isi dari website kalian nantinya dan tentunya dapat dijadikan patokan nantinya saat membuat.

Menginstal text editor

Langkah kedua inilah yang paling penting. Kalian harus menginstal terlebih dahulu aplikasi coding yang ingin digunakan, jika aplikasinya saja tidak punya gimana mau membuat website?

Membuat folder baru

Membuat folder ini dapat memudahkan kita untuk menyimpan hasil codingan kita nantinya agar tidak tercampur dengan file lainnya. Di folder inilah kalian dalam menyimpan semua hasil codingan yang telah dibuat dan juga file gambar yang akan digunakan untuk membuat website.

Membuat file index

Buatlah sebuah file dengan nama index.html pada text editor yang kalian sukai atau yang telah diinstal.

<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </body> </html>

Title: isikan judul untuk nama file tersebut

Header: untuk membuat header atau judul awal website

Nav: untuk membuat navbar/ navigasi bar pada website

Article: membuat konten isi dari website yang akan dibuat

Footer: membuat footer duntuk di bagian bawah website

Membuat file style

Setelah membuat file index.html selanjutkan kalian dapat membuat file dengan nama style.css pada text editor yang sama dan tentunya juga pada folder yang sama pula. Dalam file style.css ini kita isikan dengan deskripsi dari file index.html yang berisikan spesifikasinya dari header, navbar, konten, dan juga footer.

body { font-family: bold italic; background: #A3CC7A; padding: 0; margin:0; } .container { width: 100%; height: auto; background: white; margin:auto; margin-top: 15px; padding-bottom: 5px; } .logo { font-size: 350px; padding: 30px 0 30px 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #8DBC5D; border: 1px solid gainsboro; } nav li { float: left; } nav li a { display: inline-block; color:#ffffff; text-align: center; padding: 14px 15px; text-decoration: none; } nav li a:hover { opacity:0.9; background-color: #3385ff; } article { width: 98.8%; height: auto; border-radius: 3px; margin: 5px 5px 5px 5px; border: 1px solid gainsboro; clear: both; } article p { padding: 5px 6px 5px 5px; line-height: 1.5; } article .konten { width: 23.5%; height: auto; margin: 5px 5px 5px 5px; border-radius: 3px; border: 1px solid gainsboro; float: left; } article .isi { width: 98.5%; height: auto; margin: 5px 5px 5px 5px; border-radius: 3px; border: 1px solid gainsboro; float: left; } article .isi .judul { font-size: 300px; margin-bottom: 10px; margin-left: 10px; margin-top: 10px; } article .isi p { margin-top: 0; } article .isi img { float: left; margin: 5px 5px 5px 5px; } article .konten img { width: 95.8%; height: 150px; margin: 5px 5px 5px 5px; } article .konten:hover { opacity:0.9; } article .konten .judul a { margin-left: 5px; text-decoration: none; font-size: 250px; color:#020101; } article .konten a:hover { opacity:0.9; } footer { clear: both; width: 98.8%; height: auto; text-align: center; margin: 5px 5px 5px 5px; border-radius: 3px; border-bottom: 1px solid gainsboro; padding-top: 15px; padding-bottom: 15px; }

Untuk codingan di atas hanya untuk refensi kalian dalam membuat file style.css selebihnya kalian bisa membuatnya sendiri dan menyesuaikan ingin seperti apa website yang akan dibuat.

6. Hubungkan file css dengan file html

Langkah terakhir ini juga tidak kalah penting dengan langkah-langkah sebelumnya. Karena, jika kedua file tersebut belum dihubungkan maka program yang ada di file css tidak akan berjalan jika file html dijalankan. Untuk menghubungkan kedua file tersebut caranya cukup mudah.

<link rel="stylesheet" href="style.css">

Cukup kalian tambahkan code seperti itu di bagian head pada file index, maka kedua file tersebut akan terhubung. Untuk membuat file lainnya untuk isi konten, kalian cukup ikuti langkah-langkah seperti membuat file index.html di atas. Sekian tutorial yang dapat saya sampaikan, kurang dan lebihnya mohon maaf. Terimakasih, semoga membantu.

Sumber referensi:

https://www.niagahoster.co.id/blog/pengertian-website/

https://kelasprogrammer.com/cara-membuat-website-dengan-html-dan-css/

cross promote cross promote

Bagikan berita ini:

Lintang Cahya Maharani

Lintang Cahya Maharani

Minggu, 25 April 2021

ARTIKEL TERKAIT

  • {{n.title}}

Belajar lebih lengkap, cepat dan terarah dengan akun premium. Pilih paket akun premium sesuai dengan kebutuhanmu.

LANGGANAN SEKARANG

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

  • {{n.title}}

TAGS

website tutorial programming

KATEGORI

  • {{ lc }}
Prev Prev Next Next Belajar Online Gratis kelas gamelab

Belajar Pemrograman, Desain, dan Bisnis secara gratis di Gamelab Indonesia.

Coba Sekarang

Belajar Online Gratis

kelas gamelab

Belajar Pemrograman, Desain, dan Bisnis secara gratis di Gamelab Indonesia.

Coba Sekarang
Laporkan Plagiasi
Link Artikel Plagiasi* Nama kamu* Email kamu* Kirim Laporan
Gamelab menggunakan cookie

Website Gamelab menggunakan cookie pada browser kamu untuk analytics dan agar dapat menyimpan sesi login kamu. Dengan mengakses website ini, berarti kamu menyetujui Privacy Policy dan Term & Condition Gamelab

Saya mengerti
{{forgetPassword ? "Reset Password" : (isSignIn ? "Masuk" + (kids?" Gamelab Kids":"") : "Daftar")}}
Simpan sesi Masuk Masuk Klik di sini jika Anda lupa kata sandi atau Masuk dengan Masuk dengan Google Masuk dengan Google Belum punya akun? Daftar sekarang

Dengan menekan "Daftar" Kamu telah menyetujui syarat & ketentuan dan kebijakan privasi Gamelab.id

Peserta program kartu prakerja? Daftar melalui halaman berikut +62 Username * Hanya boleh memasukkan huruf (a-z, A-Z) & angka (0-9), tidak boleh ada spasi Daftar atau daftar dengan Daftar dengan Google Sudah punya akun? Masuk

Kami akan mengirimkan link reset password ke email kamu

Kirim Link Reset Password ke Email Masuk

Verifikasi Kode

Tulis ulang kode yang telah Anda terima di email

Verifikasi Tulis ulang angka yang kamu lihat

Từ khóa » Html Dan Css Sederhana