Domain adalah nama website kita. Seperti google. com, detik. com, wikipedia. com. Idealnya domain diakhiri dengan dot com, net, org, info, dll
Karena kita akan menggunakan hosting dan domain gratis, maka ekstensi domain gratis yang kita gunakan adalah 000webhostapp. com
Jadi domain situs web HTML Anda akan menjadi
xxxx. 000webhostapp. com
xxxxx = nama domain Anda
Dalam contoh ini domain saya adalah websitehtmlkerensaya. 000webhostapp. com
3. 1. 1 Pada bagian project, buat nama domain sesuai keinginan, password, dan klik kirim
Website merupakan salah satu media yang paling populer saat ini, terutama website berjenis blog dan website penjualan. Lalu, bagaimana cara membuat website?
Apa itu situs web?
Website adalah sebuah situs di internet yang dapat diakses secara luas dan berisi beberapa halaman yang menghubungkan orang-orang di wilayah atau wilayah yang berbeda. Website juga sering digunakan sebagai tempat untuk mempromosikan barang atau jasa yang tidak perlu langsung membawa orang ke suatu wilayah atau daerah. Selain itu, website juga memiliki beberapa jenis yang memiliki fungsi berbeda
- Situs web atau blog pribadi,
- Situs web toko online,
- Situs web perusahaan, dll
Jenis website sangat beragam, tergantung dari fungsi website yang kita buat digunakan untuk apa. Namun dari sekian banyak jenis website yang sering kita jumpai adalah ketiga jenis yang sudah disebutkan di atas. Ternyata ada beberapa cara untuk membuat website yaitu dengan menggunakan coding dan ada juga yang menggunakan cara instan tanpa menggunakan coding. Nah, saat ini cara yang sering dilakukan adalah membuat website secara instan tanpa menggunakan coding, namun yang akan kita pelajari sekarang adalah cara membuat website dengan menggunakan HTML dan CSS. Bagaimana Anda melakukannya?
Baca Juga. Apa Situs Web Pertama di Dunia?
Membuat kerangka wireframe/website
Langkah pertama adalah membuat wireframe. Apa gunanya? . Membuat wireframe tidak harus bagus, asal bisa mencakup semua konten website Anda nantinya dan tentunya bisa dijadikan patokan nantinya saat membuat
Instal editor teks
Langkah kedua ini yang paling penting. Anda harus install terlebih dahulu aplikasi coding yang ingin anda gunakan, jika anda tidak memiliki aplikasinya, bagaimana cara membuat website?
Buat folder baru
Pembuatan folder ini dapat memudahkan kita untuk menyimpan hasil coding kita nanti agar tidak tercampur dengan file lain. Di dalam folder ini anda menyimpan semua hasil coding yang telah dibuat dan juga file gambar yang akan digunakan untuk membuat website tersebut
Buat file indeks
Buat file dengan nama index. html pada editor teks yang Anda sukai atau yang telah terpasang
Judul. isi judul untuk nama file
Tajuk. untuk membuat header atau judul awal website
Nav. untuk membuat navbar/bilah navigasi di situs web
Artikel. membuat konten dari website yang akan dibuat
Catatan kaki. buat footer di bagian bawah website
Buat file gaya
Setelah membuat file indeks. html maka anda bisa membuat file dengan nama style. css di editor teks yang sama dan tentunya juga di folder yang sama. Dalam file gaya. Css ini kita isi dengan deskripsi dari file index. html yang berisi spesifikasi dari header, navbar, content, 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; }_Pengkodean di atas hanya untuk referensi Anda dalam membuat file gaya. Css selebihnya bisa Anda buat sendiri dan sesuaikan tampilan website yang Anda inginkan
6. Hubungkan file css dengan file html
Langkah terakhir ini juga tidak kalah pentingnya dengan langkah-langkah sebelumnya. Karena jika kedua file tersebut belum terhubung, maka program di dalam file css tidak akan berjalan jika file html dijalankan. Untuk menghubungkan kedua file tersebut, caranya cukup sederhana
Anda tinggal menambahkan kode seperti itu di bagian head file index, kemudian kedua file tersebut akan terhubung. Untuk membuat file lain untuk konten, Anda tinggal mengikuti langkah-langkah seperti membuat file indeks. html di atas. Sekian tutorial yang dapat saya sampaikan, mohon maaf atas kekurangan dan kelebihannya. Terima kasih, semoga membantu