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.
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.
